!NEAR React Hooks v0.3.x

NEAR React Hooks v0.3.x

Use react hooks to configure and interact with NEAR.

Reference Docs

Setup

Reference near-api-js in the browser, include it via CDN or add it to your asset pipeline as you would any other JavaScript library:

``html

`

Install the package from npm npm i @sekmet/near-reacthooks or yarn add @sekmet/near-reacthooks.

Then wrap your application with the NearProvider passing it an environment:

- mainnet
- testnet
- betanet
- local

`js
import React from "react";
import ReactDOM from "react-dom";
import { NearProvider, NearEnvironment } from "@sekmet/near-reacthooks";
import App from "./App";

ReactDOM.render(


,
document.querySelector("#root")
);
`

$3

`ts
import { NearProvider, NearEnvironment } from "@sekmet/near-reacthooks";
import { AppProps } from "next/app";
import Script from "next/script";

const MyApp = ({ Component, pageProps }: AppProps) => {
return (
<>
id="near-api-js"
src="https://cdn.jsdelivr.net/gh/nearprotocol/near-api-js/dist/near-api-js.js"
/>




);
};

export default MyApp;
`

You can more finely tune the NEAR configuration by passing additional props
no the NearProvider. See the docs for more information.

Once the application is wrapped with the NearProvider your can access the
NEAR connection, the NEAR wallet, and NEAR contract using react hooks from
any component in the application.

`js
import React, { useEffect } from "react";
import {
useNear,
useNearWallet,
useNearContract,
} from "@sekmet/near-reacthooks";

export default function App() {
const near = useNear();
const wallet = useNearWallet();
const contract = useNearContract("dev-123457824879", {
viewMethods: ["getCount"],
changeMethods: ["decrement", "increment"],
});

useEffect(() => {
if (!wallet.isSignedIn()) wallet.requestSignIn();
}, []);

if (!wallet.isSignedIn()) return null;

return

{wallet.getAccountId()}

;
}
``