# React integration

At the root of your application, you need to declare a **MetaproProvider**  which controls access and persistence to a **connector** instance: 

```typescript
import { MetaproProvider } from "@metapro/connector";

const App = () => {
  return (
    <MetaproProvider>
{/* App code goes here. */}
    </MetaproProvider>
  );
};

export default App;

```

### Basic implementation of our plugin

```typescript
import React from "react";
import {
  MetaproConnector,
  MetaproConnectorChain,
  useMetapro,
} from "@metapro/connector";



/* Creating a new MetaproConnector object. */
const metaConfig = new MetaproConnector({
  chainId: MetaproConnectorChain.TESTNET,
});
/* you can choose which chainId metapro should connect to*/

const Page: React.FC = () => {
  const { login, logout} = useMetapro(metaConfig);
  const account = metaproHooks.useAccount();
  
  return (
    <>
      <button onClick={()=> login()}>Login</button>
      <button onClick={() => logout()}>logout</button>
    </>
  );
};

export default Page;
```

### [Click to get more information about useMetapro hook](https://docs.metaproprotocol.com/wallet-connector/basic-informations/..#metapro-hook-explained-usemetapro)&#x20;

### After implementation you can follow [this steps](https://docs.metaproprotocol.com/wallet-connector/basic-informations/..#after-setup-our-plugin) to login with metapro wallet