sho-aid
v1.1.1
Published
Design system with reusable components
Downloads
14
Maintainers
Readme
Sho-aid
Sho-aid is an atomic design system containing reusable components built with React and Typescript.
[Live Demo]
Installation:
npm install sho-aid
or
yarn add sho-aid
Usage :
Add Dropdown
to your component:
import the css styles from 'sho-aid/dist/index.css'
Dropdown :
import React from 'react'
import { Dropdown } from 'sho-aid'
import 'sho-aid/dist/index.css'
const DropDownComponent = () => {
const data = [
{ value: 'Orange', key: 1 },
{ value: 'Apple', key: 2 },
{ value: 'Kiwi', key: 3 },
{ value: 'Watermelon', key: 4 },
{ value: 'Mango', key: 5 },
]
const [selectedOption, setSelectedOption] = useState()
const handleSelectOptions = (data) => {
setSelectedOption(data?.value)
}
return (
<Dropdown
data={data}
title={selectedOption || 'Select an option'}
onSelect={handleSelectOptions}
selectStyle={{}}
optionStyle={{}}
/>
)
}
export default DropDownComponent
Add Button
to your component:
import the css styles from 'sho-aid/dist/index.css'
Button :
import React from 'react'
import { Button } from 'sho-aid'
import 'sho-aid/dist/index.css'
const ButtonComponent = () => {
return (
<Button className='' onClick={() => {}} disabled={false}>
Test
</Button>
)
}
export default ButtonComponent
Add Tab
to your component:
import the css styles from 'sho-aid/dist/index.css'
Tab :
import React from 'react'
import { Tab } from 'sho-aid'
import 'sho-aid/dist/index.css'
const TabComponent = () => {
const tabValues = [
{ value: 'Orange', key: 1 },
{ value: 'Apple', key: 2 },
{ value: 'Kiwi', key: 3 },
]
return (
<Tab
data={tabValues}
tabText='flex gap-3 cursor-pointer'
tabContainer=''
onSelectedTab={(tab) => {
console.log(tab) //{value: 'Orange', key: 1}
}}
>
<div>One</div>
<div>Two</div>
<div>Three</div>
</Tab>
)
}
export default TabComponent
Custom styling
If you want to use default sho-aid styling to build upon it, you can import sho-aid's styles by using:
import 'sho-aid/dist/index.css'