HoiPoi UI

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 (
    <HoiPoiProvider>
      <Button type="big" color="primary">
        Hello World
      </Button>
    </HoiPoiProvider>
  );
}

const root = createRoot(document.querySelector('#app'))
root.render(<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 { createRoot } from 'react-dom/client';
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>
  );
}

const root = createRoot(document.querySelector('#app'))
root.render(<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.