0.2.33 • Published 1 year ago
@unofficial-hds/hds v0.2.33
HDS
We aim to build a library of custom ReactJS components that implements our unique UI design conventions (HDS). Our components will be based primarily on Chakra UI. React Storybook will be used for documentation and testing.
- Reusable block of components
- HDS integrated styling
- Easy to implement
Installation
npm i @highoutput/hdsIn your main app file import theme provider and make it a parent of all components.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ThemeProvider } from '@highoutput/hds';
const App = () => {
return (<ThemeProvider>{...components here}</ThemeProvider>);
};
ReactDOM.render(<App />, document.getElementById('root'));After that you can use all the components within hds core.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { InputField, Box } from '@highoutput/hds';
const Form = () => {
return (
<Box>
<InputField
helperMsg="This is a hint text to help user"
id="name"
label="Name"
onBlur={() => {}}
onChange={() => {}}
onPressEnter={() => {}}
placeholder="Input your name"
/>
</Box>
);
};
export default Form;