# Veramo React

## Setup context provider

`index.tsx`

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import VeramoProvider from "@veramo/react";
import mockStorage from 'mock'

const config = {
  storage: mockStorage
};

ReactDOM.render(
  <React.StrictMode>
    <VeramoProvider config={config}>
      <App />
    </VeramoProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

## Use

`App.tsx`

import React from 'react';
import { useVeramo } from '@veramo/react';
import { IIdentifier, createAgent } from '@veramo/core';

function App() {
  const { agent, createAgentFromConfig, addAgent, removeAgent, setActive } = useVeramo();
  const [identifiers, setIdentifiers] = React.useState<IIdentifier[]>([]);
  
  
  
  const agent1 = createAgent({
      context: {
          name: 'Registry',
          picture: '...'
      }
      plugins: [
          AgentRestClient({
              url: 'https://sun.veramo.io',
              enabledMethods: ['resolveDid']
          }),
          AgentRestClient({
              url: 'https://jupiter.veramo.io',
              enabledMethods: ['handleMessage']
          }),

      ]
  })
  
  
  addAgent(agent1)
  
  setActive(0)

  React.useEffect(() => {
    agent
      .didManagerFind()
      .then(setIdentifiers)
  }, [agent]);
  
  return (
    <div>
        {agent.context.name}
      <ul>
        {identifiers.map(identifier => (
          <li>{identifier.did}</li>
         ))}
      </ul>
    </div>
  );
}

export default App;