https://github.com/youfoundron/react-web3-network-status
Simple and subtle Ethereum network status indicator inspired by MetaMask. 🌐🔌
https://github.com/youfoundron/react-web3-network-status
ethereum metamask network react web3
Last synced: 6 months ago
JSON representation
Simple and subtle Ethereum network status indicator inspired by MetaMask. 🌐🔌
- Host: GitHub
- URL: https://github.com/youfoundron/react-web3-network-status
- Owner: youfoundron
- License: gpl-3.0
- Created: 2017-09-07T00:32:31.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-08T09:34:37.000Z (almost 8 years ago)
- Last Synced: 2025-04-12T18:04:22.600Z (6 months ago)
- Topics: ethereum, metamask, network, react, web3
- Language: JavaScript
- Homepage:
- Size: 198 KB
- Stars: 56
- Watchers: 6
- Forks: 7
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React Web3 Network Status
A MetaMask inspired component to show users the status of their network connectivity.
Now [officially endorsed](https://twitter.com/metamask_io/status/928031347494461442)!
## Installation
Using npm:
`$ npm install --save react-web3-network-status web3@^0.x.x babel-polyfill`
Using yarn:
`$ yarn add react-web3-network-status web3@^0.x.x babel-polyfill`
## Usage
```javascript
import 'babel-polyfill'
import React from 'react'
import NetworkStatus from 'react-web3-network-status'
const MyApp = () => (
)
export default MyApp
```
If you're already managing state and wish to explicitly pass a network id, try out the stateless version:
```javascript
import React from 'react'
import NetworkStatus from 'react-web3-network-status/stateless'
const MyApp = () => (
)
export default MyApp
```
## Demo
To run the demo app locally, clone this repo and run:
```
$ cd ../react-web3-network-status
$ npm install
$ npm run demo
```
Then visit [localhost:3000](http://localhost:3000) in your browser.
## Contributing
To contribute effectively, follow these steps:
1. Create a feature branch: `git checkout -b my-new-feature`
2. Commit your changes: `git commit -m 'add some feature'`
3. Push to the branch: `git push origin my-new-feature`
4. Submit a pull request!
## Inspiration
* [MetaMask](https://github.com/MetaMask/metamask-extension) - User interface
* [react-web3](https://github.com/coopermaruyama/react-web3) - User experience
* [DAO1901](https://github.com/asseth/dao1901) - State management using Redux Sagas