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/hds-imageIn 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 { Image } from '@highoutput/hds-image';
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>
<Image alt="" src=""/>
</Box>
);
};
export default Form;