open-index/open-npm huggingface dataset:
npm package: @smartgift/hero-ui-library
Description: `hero-ui` is a react library with a set of components ready to use in your project.
Latest version: 0.8.28-theming.102
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# 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:

```js
yarn add @smartgift/hero-ui-library
```

## Usage

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

```js
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:

```js
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.

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

const Button = styled.button``;

export { Button };
```

```js
/* /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.

```js
/* /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 };
```