Nightly Perpetrated Mischief
    Wondering what’s next for npm?Check out our public roadmap! »

    @rsksmart/rif-ui
    TypeScript icon, indicating that this package has built-in type declarations

    0.6.0 • Public • Published

    RIF logo

    RIF-UI

    This is a React library written in Typescript and based on Material-UI. It exposes common components, services and assets to be re used in RIF projects.

    license MIT npm package CircleCI Managed by tAsEgir Follow on Twitter Dependabot Status

    Warning: This project is in alpha state. There might (and most probably will) be changes in the future to its working. Also, no guarantees can be made about its stability, efficiency, and security at this stage.


    Lead Maintainer

    Alvaro Fariña

    See what "Lead Maintainer" means here.

    Installation

    npm i @rsksmart/rif-ui

    Getting Started

    Basic Usage

    In order to experience all the benefits of this library, we recommend to wrap your application with the ThemeProvider component from Material-UI and pass in our Material-UI theme.

    import React, { FC } from 'react'
    import { ThemeProvider } from '@material-ui/core/styles'
    import { theme, Typography } from '@rsksmart/rif-ui'
    import '@rsksmart/rif-ui/dist/index.css'
    
    const App = () => {
      return (
        <ThemeProvider theme={theme}>
          <Typography color='primary'>Hello world :)</Typography>
        </ThemeProvider>
      )
    }
    
    export default App

    Using Header and PageTemplate components

    The Header and PageTemplate components were styled and designed to work together. So, whenever you need one of them, we suggest to follow the next example

    import { Header, PageTemplate, theme, Typography } from '@rsksmart/rif-ui'
    import { ThemeProvider } from '@material-ui/core/styles'
    import { BrowserRouter } from 'react-router-dom'
    
    const App = () => (
      <ThemeProvider theme={theme}>
        <BrowserRouter>
          <Header />
          <PageTemplate>
            <Typography color='primary'>Hello world :)</Typography>
          </PageTemplate>
        </BrowserRouter>
      </ThemeProvider>
    )

    Web3Provider

    On the Web3Provider you can set the property requiredNetworkId and the actions onConnectedAccountChange, onConnectedNetworkChange that will get triggered once the user wallet is connected and there is a change on the account or network. As an example

    <Web3Provider.Provider 
      requiredNetworkId={requiredNetworkId}
      actions={{
        onConnectedAccountChange: onConnectedAccountChange,
        onConnectedNetworkChange: onConnectedNetworkChange
      }}>
    
      {/* Your stuff here */}
      
    </Web3Provider.Provider >
    

    Development - Example folder

    A sandbox project is provided in order to test the library or try new features locally without having to release a new version. It lives at the example folder. In order to run it, follow the next steps:

    1. At rif-ui:
    npm i
    npm start
    
    1. Wait until it compiles to the dist folder. Then, in another terminal:
    cd example/ && npm start
    
    1. (Optional) Import the components, assets or services that you want in the example/src/App.js file following the Usage section to see them in action.

    Testing

    To run unit test and build the library, you can use

    npm run test
    

    If you only want to run the unit test, you can use

    npm run test:unit
    

    License

    MIT © rsksmart

    Acknowledgments

    • This library was created with create-react-library. A great project to start you own library.
    • Thanks to EVM Networks for providing the data source of network objects as a JSON, which inspired us to create the NetworkInfo interface

    Install

    npm i @rsksmart/rif-ui

    DownloadsWeekly Downloads

    122

    Version

    0.6.0

    License

    MIT

    Unpacked Size

    853 kB

    Total Files

    191

    Last publish

    Collaborators

    • avatar