A flexible and customizable react component library.
## ⭐️ Features
- High customizable components.
- Theming with JSS.
- React Styleguidist
## 📦 Installation
```
// with npm
npm install hoi-poi-ui
// with yarn
yarn add hoi-poi-ui
```
## ⚙️ Usage
```
import React from 'react';
import { createRoot } from 'react-dom/client';
import { HoiPoiProvider, Button } from 'hoi-poi-ui';
function App() {
return (
);
}
const root = createRoot(document.querySelector('#app'))
root.render();
```
[](https://codesandbox.io/s/9kz3q68qw)
## 💎 Customization
### Theme
We need to use `createHoiPoiTheme` for customize current theme. It will do a deep merge without concatening arrays.
You can see the default theme [here](https://github.com/Sage/hoi-poi-ui/blob/master/src/utils/styles/defaultTheme.js).
```
import React from 'react';
import { createRoot } from 'react-dom/client';
import { HoiPoiProvider, createHoiPoiTheme, Button } from 'hoi-poi-ui';
const theme = createHoiPoiTheme({
colors: {
primary: '#ed8b00',
},
});
function App() {
return (
);
}
const root = createRoot(document.querySelector('#app'))
root.render();
```
### Classes
When the className property isn't enough, you can use `classes` props for inject CSS in any deeper element.
The list of elements for each component is documented below the respective examples.
```
const classes = {
Loader: 'button__custom-class'
}
return (
)
```
### Overrides
HoiPoi maximizes customization and that is why it has a system to overwrite any component properties and components used by this. Like classes you need to use the component name but in this case you can nest the prop `overrides`.
```
const overrides = {
Loader: {
size: 'small'
}
}
return (
)
```
## 📜 Documentation and examples
Check out our [styleguidist](https://github.com/Sage/hoi-poi-ui/).
## 🌐 Browser support
| [](http://godban.github.io/browsers-support-badges/)IE / Edge | [](http://godban.github.io/browsers-support-badges/)Firefox | [](http://godban.github.io/browsers-support-badges/)Chrome | [](http://godban.github.io/browsers-support-badges/)Safari |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| IE11, Edge | >= 52 | >= 49 | >= 10 |
## 🙌 Contributing
To learn how to setup a development environment and for contribution guidelines, see [CONTRIBUTING.md](/CONTRIBUTING.md).
## 📜 Changelog
We use [GitHub releases](https://github.com/Sage/hoi-poi-ui/releases).
## 🌮 Thanks
[@hodgef/js-library-boilerplate](https://github.com/hodgef/js-library-boilerplate) for the initial boilerplate.
## 🔐 Security
To report a security vulnerability, please use the [Tidelift security contact](https://tidelift.com/security).
## 📄 License
This project is licensed under the terms of the
[MIT license](/LICENSE).
---
_Source: https://npm.io/package/hoi-poi-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
](http://godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| IE11, Edge | >= 52 | >= 49 | >= 10 |
## 🙌 Contributing
To learn how to setup a development environment and for contribution guidelines, see [CONTRIBUTING.md](/CONTRIBUTING.md).
## 📜 Changelog
We use [GitHub releases](https://github.com/Sage/hoi-poi-ui/releases).
## 🌮 Thanks
[@hodgef/js-library-boilerplate](https://github.com/hodgef/js-library-boilerplate) for the initial boilerplate.
## 🔐 Security
To report a security vulnerability, please use the [Tidelift security contact](https://tidelift.com/security).
## 📄 License
This project is licensed under the terms of the
[MIT license](/LICENSE).
---
_Source: https://npm.io/package/hoi-poi-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._