![](\"https://github.com/symfoni/hardhat-plugins/blob/hardhat/packages/hardhat-react/SymfoniHardhatReact.gif\")
\n\n# Hardhat React\n\nA Hardhat plugin that generates a React hook component from your smart contracts. Hot reloaded into your React app. Deployed or not deployed. And everything typed and initialized.\n\n- Uses deployments from **hardhat-deploy** to inject the latest instance of your smart contracts into the React app.\n- Uses **Typechain** so all your smart contracts are typed.\n- Uses **Ethers** so everything else is typed.\n- Runs alongside **hardhat-node** or hardhat-deploy --watch so any change you do in a smart contract is immediately injected into React app. Just start the hardhat runtime, and everything should be reflected.\n- Provision a connection to your blockchain node. Either with **Web3modal**, which supports many wallets, or directly to your hardhat node through HttpRPC.\n\n# Quick start\n\nIf you want to quickly get started with a new hardhat project and a react application. Try this [boilerplate](https://github.com/symfoni/hardhat-react-boilerplate).\n\n# Get started\n\n## Install plugin\n\n**Yarn:** `yarn add --dev @symfoni/hardhat-react`\n\n**NPM:** `npm install --save-dev @symfoni/hardhat-react`\n\n## Install peer dependencies\n\n**Yarn:** `yarn add --dev hardhat hardhat-deploy hardhat-deploy-ethers @typechain/hardhat ts-morph ts-node typescript ts-generator typechain@4.0.0 @typechain/ethers-v5`\n\n**NPM:** `npm install --save-dev hardhat hardhat-deploy hardhat-deploy-ethers @typechain/hardhat ts-morph ts-node typescript ts-generator typechain@4.0.0 @typechain/ethers-v5`\n\n## import plugins\n\nTo import plugins into your hardhat project.\n\nIf javascript project, hardhat.config.js\n\n```js\nrequire(\"@nomiclabs/hardhat-ethers\");\nrequire(\"hardhat-deploy-ethers\");\nrequire(\"hardhat-deploy\");\nrequire(\"@symfoni/hardhat-react\");\nrequire(\"@typechain/hardhat\");\nrequire(\"@typechain/ethers-v5\");\n```\n\nif typescript project, hardhat.config.ts\n\n```ts\nimport \"@nomiclabs/hardhat-waffle\";\nimport \"@nomiclabs/hardhat-ethers\";\nimport \"hardhat-deploy-ethers\";\nimport \"hardhat-deploy\";\nimport \"@symfoni/hardhat-react\";\nimport \"@typechain/hardhat\";\nimport \"@typechain/ethers-v5\";\n```\n\n# Runtime\n\nThe plugin will hooks into hardhat-deploy, which hooks into `npx hardhat node --watch`. Therefore, the plugin will run when you are starting up a node or making changes to a solidity file or deploy file.\n\nYou can run it manually with `npx hardhat react`. You probably need to run `npx hardhat typechain` and `npx hardhat deploy`first to have artifacts, deployments, and typechain files ready.\n\nThe React context uses the output from typechain and deployments. It generates a react context component as a typescript react file (SymfoniContext.tsx), which imports typechain. It then uses these files alongside Ethers and Web3Modal to set up a context for your connection and each smart contract (deployed or not deployed).\n\n\n\n# Frontend\n\nThis plugin assumes that you are building your frontend inside a hardhat project (we later want to go away from this assumption). So we recommend you create a `frontend` folder inside your hardhat project where all your frontend code and packages reside. Take a look at https://github.com/symfoni/hardhat-react-boilerplate for a demonstration.\n\nMost frontend projects require all file dependencies to be inside that folder. Therefore we suggest (and default ) your typechain and deployments path to \"./frontend/src/hardhat/{deployments | typechain}\". The Hardhat context (a react component .tsx) file will also default to this folder. Though you are free to set whatever paths you like, and it should resolve relative to your config.paths.react folder.\n\n## Frontend dependencies\n\nYou will need to install these dependencies in your frontend.\n\n**Yarn:** `yarn add ethers web3modal`\n\n**NPM:** `npm install --save ethers web3modal`\n\n## Frontend \"framework\"\n\nYou are free to choose whatever React typescript \"framework\". We have only tested with Create React App for now.\n\nCreate React app can be initialized in your Hardhat root folder with:\n\n**NPX:** `npx create-react-app frontend --template typescript`\n\n## React component\n\nTo use the React component in a React application. Import the SymfoniContext.tsx file in your app.\n\n```ts\nimport { Symfoni } from \"./hardhat/SymfoniContext\";\n```\n\nThen wrap everything or the components in this context as a provider.\n\n```ts\n{message}
\n setInputGreeting(e.target.value)}>\n \n