README
HoiPoi UI
A flexible and customizable react component library.
⭐️ Features
- High customizable components.
- Theming with JSS.
- React Styleguidist
- Unit testing
- Weekly dependabot dependency updates
📦 Installation
// with npm
npm install hoi-poi-ui
// with yarn
yarn add hoi-poi-ui
⚙️ Usage
import React from 'react';
import ReactDOM from 'react-dom';
import { HoiPoiProvider, Button } from 'hoi-poi-ui';
function App() {
return (
<HoiPoiProvider>
<Button type="big" color="primary">
Hello World
</Button>
</HoiPoiProvider>
);
}
ReactDOM.render(<App />, document.querySelector('#app'));
💎 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.
import React from 'react';
import ReactDOM from 'react-dom';
import { HoiPoiProvider, createHoiPoiTheme, Button } from 'hoi-poi-ui';
const theme = createHoiPoiTheme({
colors: {
primary: '#ed8b00',
},
});
function App() {
return (
<HoiPoiProvider theme={theme}>
<Button type="big" color="primary">
Hello World
</Button>
</HoiPoiProvider>
);
}
ReactDOM.render(<App />, document.querySelector('#app'));
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 (
<Button type="big" color="primary" classes={classes}>
Hello World
</Button>
)
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 (
<Button type="big" color="primary" overrides={overrides}>
Hello World
</Button>
)
📜 Documentation and examples
Check out our styleguidist.
🌐 Browser support
IE / Edge | Firefox | Chrome | Safari |
---|---|---|---|
IE11, Edge | >= 52 | >= 49 | >= 10 |
🙌 Contributing
To learn how to setup a development environment and for contribution guidelines, see CONTRIBUTING.md.
📜 Changelog
We use GitHub releases.
🌮 Thanks
@hodgef/js-library-boilerplate for the initial boilerplate.
🔐 Security
To report a security vulnerability, please use the Tidelift security contact.
📄 License
This project is licensed under the terms of the MIT license.