# monero-network-selector

> A basic react component that allows users of a monero web application to select from among the three Monero networks (mainnet, stagenet, and testnet).

Latest version **2.0.2** (published 2022-05-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install monero-network-selector
pnpm add monero-network-selector
yarn add monero-network-selector
bun add monero-network-selector
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2022-05-05 |
| First published | 2021-12-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 15.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | BeanTosser |
| Maintainers | beantosser |
| Keywords | monero, network, react, component |

## Links

- npm: https://www.npmjs.com/package/monero-network-selector
- Repository: https://github.com/beantosser/monero-network-selector
- Homepage: https://github.com/beantosser/monero-network-selector#readme
- Issues: https://github.com/beantosser/monero-network-selector/issues
- npm.io page: https://npm.io/package/monero-network-selector

## Dependencies (3)

- [core-js](https://npm.io/package/core-js.md) ^3.19.2
- [file-loader](https://npm.io/package/file-loader.md) ^6.2.0
- [regenerator-runtime](https://npm.io/package/regenerator-runtime.md) ^0.13.9

## Recent versions

- 2.0.2 (latest) — 2022-05-05
- 2.0.1 — 2022-05-04
- 2.0.0 — 2022-05-04
- 1.3.1 — 2022-03-09
- 0.3.1 — 2022-01-13
- 0.3.0 — 2021-12-19
- 0.2.1 — 2021-12-10
- 0.2.0 — 2021-12-10

## README

# MoneroNetworkSelector
A React UI drop-down menu that allows end users of react-based Monero web applications to select which Monero network to use the application with.

## Usage
These instructions only apply to independent use of the MoneroNetworkSelector UI component. If you want to use the MoneroNetworkSelector in conjunction with the ConnectionManager UI, use the [NetworkConnectionCoordinator component](https://ijli8s8ej8j.com/) (only available for [monero-javascript](https://github.com/monero-ecosystem/monero-javascript) applications)

### Props
The MoneroNetworkSelector component takes three props: **setNetworkType**, **networkTypes**, and **className**.  
  **setNetworkType**(optional): A function to handle the user changing the current network.
  **networkTypes**(optional): An array of integer values between 0 and 2. Each integer corresponds to a network type:  

  0: mainnet  
  1: stagenet  
  2: testnet  
  
  The array specifies which networks the user should be able to choose from. A valid networkTypes array must contain exactly two or three integer elements between 0 and 2. The order of the values in the array determines the order in which they appear in the rendered network selector component.
  Some examples of valid networkTypes arrays:  
  * [0, 2]  
  * [0, 1, 2]  
  * [2, 1]  
  
Some examples of invalid networkTypes arrays:  
  * [0, 0, 1] (repeat values are not allowed)  
  * [8, 2] (only the values 0, 1, and 2 are valid)  
  * [0] (the array must have at least two elements)  
  * [0, 2, 1, 4] (the array must have no more than three elements)  
  
  The network selector will default to listing all three networks in the order 0(mainnet), 1(stagenet), 2(testnet) if it does not receive the **networkTypes** prop.  

**notes on styling the network selector**: The entire network selector element has the class name "network_selector_container". The network selector component contains a "label" element and a "select" element. All three elements can be styled as follows:

```
.network_selector_container {
  [your styles here]
}

.network_selector_container > label {
  [your styles here]
}

.network_selector_container > select {
  appearance: none;
  --webkit-appearance: none;
  --moz-appearance: none;
  [your styles here]
}

```
 

### Instructions
  1\. Install the MoneroNetworkSelector module from npm:

```
npm install monero-network-selector
```
  2\. Import the MoneroNetworkSelector component into the javascript file that you intend to use the MoneroNetworkSelector UI in:

```
import {MoneroNetworkSelector} from "monero-network-selector"
```

**Note that this is a named import and must therefore be surrounded in curly braces "{}" as in the example.**  

  3\. Pass the required props to the MoneroNetworkSelector component in your JSX implementation:

```
return(
// Your JSX here
<MoneroNetworkSelector 
  setNetworkType = {setNetworkType}
  networkTypeFlags = {[0,1]}
/>
// Your JSX here
)
```
&nbsp;&nbsp;4\. Implement the setNetworkType function in your javascript file. The function must accept a number value of 0, 1, or 2 as an argument. For example:

```
const setNetworkType = function(networkType) {
  switch(networkType){
    case 0:
      console.log("Using Mainnet");
      break;
    case 1:
      console.log("Using Stagenet");
      break;
    case 2:
      console.log("Using Testnet");
      break;
  }
}
```

---
_Source: https://npm.io/package/monero-network-selector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._