npm package: @p.network/react-web3-settings
Description: react-web3-settings is a handy React component that provides an easy-to-use interface for managing your Web3 settings such as Node RPC, Etherscan API key, Alchemy API key, and more. It was developed to streamline the setup process for developers working w
Author: Alessandro Manfredi
Latest version: 1.2.0

# react-web3-settings

react-web3-settings is a handy React component that provides an easy-to-use interface for managing your Web3 settings such as Node RPC, Etherscan API key, Alchemy API key, and more. It was developed to streamline the setup process for developers working with blockchain integrations in React applications.

## Features

- Easy setup for Node RPC
- Add or update Etherscan API key
- Add or update Alchemy API key
- Additional custom configuration settings can be added as needed
- Settings may be grouped in sections and subsections
- Sleek and minimal UI

## Installation

Install the package in your React project using npm:

```bash
npm install react-web3-settings
```

Or if you prefer using yarn:

```bash
yarn add react-web3-settings
```

## Usage


```javascript
import { Web3SettingsProvider, Web3SettingsButton, useWeb3Settings, getWeb3Settings } from 'react-web3-settings';

<Web3SettingsProvider
  settings={{
    // a normal setting
    alchemyApiKey: {
      label: "Alchemy API Key",
      value: "api key here",
    },
    etherscanApiKey: {
      label: "Etherscan API Key",
      value: "api key here",
    },
    bnbChainRpc: {
      label: "BNB Chain RPC",
      value: "rpc here",
    },
    // this is a section
    polygonSection: {
      label: "Polygon Settings",
      settings: {
        // settings within the section (put them in the settings array)
        rpc: {
          label: "RPC Endpoint",
          value: "rpc here",
        },
        key: {
          label: "Key",
          value: "key here",
        },
      },
    },
  }}
>
  <App />
</Web3SettingsProvider>;
...


const settings = useWeb3Settings()
or
const settings = getWeb3Settings()

const polygonKey = settings.polygonSection.key // access a setting in a section
const bnbRpc = settings.bnbChainRpc

```


## Props

The following props can be used to customize the `Web3SettingsProvider` component:

- **settings** (Settings): An object with initial configuration.
- **drawerDirection** ('right' | 'left' | 'top' | 'bottom'): Direction from which the settings drawer will open.
- **drawerStyle** (object): Style object for the drawer.
- **title** (string): Title text for the settings drawer.
- **titleStyle** (object): Style object for the title text.
- **headerStyle** (object): Style object for the drawer header.
- **bodyStyle** (object): Style object for the drawer body.
- **buttonSaveText** (string): Text for the save button.
- **buttonSaveStyle** (object): Style object for the save button.
- **buttonResetText** (string): Text for the reset button.
- **buttonResetStyle** (object): Style object for the reset button.
- **settingRowStyle** (object): Style object for the setting rows.
- **labelStyle** (object): Style object for the setting labels.
- **inputStyle** (object): Style object for the setting input fields.

## Contributing

We welcome contributions to improve this library. Please see our contributing guidelines before starting.

## License

react-web3-settings is [MIT Licensed](./LICENSE).