JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2
  • Score
    100M100P100Q65193F
  • License MIT

Exposes common components to be re used in RIF projects

Package Exports

  • @rsksmart/rif-ui

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@rsksmart/rif-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@rsksmart/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.

GitHub license npmjs reference

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.

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>
)

Example folder

If you want to try this library without creating a new project you can clone this repo and follow the next steps:

  1. At rif-ui:
npm start
  1. 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.

License

MIT © rsksmart