# @kodex-react/ctx-ethers

> Provides a React context provider for the Ethers.js library, which allows you to interact with Ethereum smart contracts.

Latest version **0.0.1-rc.5** (published 2023-03-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @kodex-react/ctx-ethers
pnpm add @kodex-react/ctx-ethers
yarn add @kodex-react/ctx-ethers
bun add @kodex-react/ctx-ethers
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1-rc.5 |
| Published | 2023-03-18 |
| First published | 2023-03-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 47.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | WizardsOrb |
| Maintainers | brittanneica, wizardsorb, oldcryptogeek |
| Keywords | kodexdata.systems, react, ethers, typescript |

## Links

- npm: https://www.npmjs.com/package/@kodex-react/ctx-ethers
- Repository: https://github.com/KodexData/kodex-react-suite-dev
- Homepage: https://github.com/KodexData/kodex-react-suite-dev#readme
- Issues: https://github.com/KodexData/kodex-react-suite-dev/issues
- npm.io page: https://npm.io/package/@kodex-react/ctx-ethers

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^18.2.0
- [ethers](https://npm.io/package/ethers.md) 5.7.2
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [@kodex-data/prototypes](https://npm.io/package/@kodex-data/prototypes.md) ^0.0.1-rc.5
- [@kodex-react/window-ethereum](https://npm.io/package/@kodex-react/window-ethereum.md) ^0.0.1-rc.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.1-rc.5 (latest) — 2023-03-18
- 0.0.1-rc.4 — 2023-03-08
- 0.0.1-rc.3 — 2023-03-03
- 0.0.1-rc.2 — 2023-03-03
- 0.0.1-rc.1 — 2023-03-03

## README

# @kodex-react/ctx-ethers

The `@kodex-react/ctx-ethers` package provides a React context provider for the Ethers.js library, which allows you to interact with Ethereum smart contracts.

## Installation

To install `@kodex-react/ctx-ethers`, use `npm` or `yarn`:

```shell
npm install @kodex-react/ctx-ethers 
# or
yarn add @kodex-react/ctx-ethers 
```


## Usage

To use the EthersProvider in your app, wrap your application with it in your top-level component:

```tsx
import { EthersProvider } from '@kodex-react/ctx-ethers'

const App: React.FC = ({ children }) => {
  return <EthersProvider>
    {children}
  </EthersProvider>
}

export default App
```

By wrapping your app with the `EthersProvider`, the context will be available to all child components of your app.

## Accessing Ethers Context

Once you have wrapped your app with `EthersProvider`, you can access the context by importing the `useEthers` hook from `@kodex-react/ctx-ethers`:

```tsx
import { useEthers } from '@kodex-react/ctx-ethers'

const MyComponent: React.FC = () => {
  const { provider } = useEthers()

  // use the ethers object to interact with Ethereum
  // ...
}
```

`useEthers` returns an object with an `provider` property, which is an instance of the ethers library. This object can be used to interact with Ethereum and smart contracts.

## Example

Here's an example of how to use `@kodex-react/ctx-ethers` to interact with a smart contract:

```tsx
import { useEthers } from '@kodex-react/ctx-ethers'
import { useState } from 'react'
import MyContract from './MyContract.json'

const MyComponent: React.FC = () => {
  const { provider } = useEthers();
  const [result, setResult] = useState<number | undefined>(undefined);

  const handleButtonClick = async () => {
    if (!ethers) return

    const contract = new ethers.Contract(
      '0x1234567890123456789012345678901234567890',
      MyContract.abi,
      provider.getSigner(),
    )

    const result = await contract.myFunction()
    setResult(result)
  }

  return (
    <div>
      <button onClick={handleButtonClick}>Call MyContract</button>
      <div>Result: {result}</div>
    </div>
  )
}
```

---
_Source: https://npm.io/package/@kodex-react/ctx-ethers · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._