HeroUI

hero-ui is a react library with a set of components ready to use in your project.

There're plenty of libraries available in react that will help you to increase your productivity however most of them contain a lot of css and are really hard to style based on your project's requirements.

Installation

To use hero-ui you need to type in your terminal:

yarn add @smartgift/hero-ui-library

Usage

First we need to wrap our application with <ThemeProvider> component.

import {ThemeProvider} from '@smartgift/hero-ui-library`;

function App() {
  return (
    <ThemeProvider>
      ...
    </ThemeProvider>
  )
}

After you wrapped your app with our ThemeProvider you can use all the components with our default theme.

For example:

import {Button} from '@smartgift/hero-ui-library`;

function App() {
  return (
    <Button onClick={()=>{}}>
      Click me
    </Button>
  )
}

Styling

We set all of our styling by styled-components. And we send the styling with the components as 'S'. (We import all styles as S and set it like this Component.S = S). You will understand more clear. Look at below.

/* /src/components/style.tsx */
import styled from 'styled-components';

const Button = styled.button``;

export { Button };

/* /src/components/Button.tsx */
import * as S from './style'

const Button = () => {...}

Button.S = S

and you can import our button your project and change its style like below.

/* /yourProject/anystyle.{jsx/tsx} */
import styled from 'styled-components';
import { Button } from '@smartgift/hero-ui-library';

const StyledButton = styled(Button)`
  background-color: red;
`;

export { StyledButton as Button };