@draekien/clean-ui
v2.15.0
Published
Clean UI is a custom React JS component library built using theme-ui.
Downloads
6
Readme
Introduction
Clean UI is a custom React JS component library built using theme-ui and typescript. The aim of this library is to create a catalogue of plug and play components that are clean and functional so that they can be used in a wide variety of situations.
Storybook
A storybook of this component library is published on Chromatic. You can view it here.
Getting Started
Install and Consume
Install the package using either npm
or yarn
# npm
npm install @draekien/clean-ui
# yarn
yarn add @draekien/clean-ui
To consume CleanUi, you must import the CleanUi
component and wrap your
app in this component.
// index.{tsx,jsx}
import { CleanUi } from 'clean-ui';
function Main() {
return (
<CleanUi>
<App />
</CleanUi>
);
}
ReactDOM.render(<Main />, document.getElementById('root'));
Customizing the theme
All it takes to use your own theme is to pass in a theme object to the
CleanUi theme
prop. The theme passed in will be merged with the default
theme provided with Clean UI.
// index.{tsx,jsx}
import { CleanUi, Theme } from 'clean-ui';
const myCustomTheme: Theme = {
colors: {
'p-400': 'purple',
},
};
function Main() {
return (
<CleanUi theme={myCustomTheme}>
<App />
</CleanUi>
);
}
ReactDOM.render(<Main />, document.getElementById('root'));
Using a component
All components are exported from the main module. This means you can import compoments using object destructuring like below.
import React from 'react';
import { Button } from 'clean-ui';
const MyComponent: React.FC = () => {
const handleClick = () => console.log('click!');
return (
<div>
<Button onClick={handleClick}>Click me!</Button>
</div>
);
};