1.0.16 • Published 3 years ago
bondsports-utils-test v1.0.16
Bondsports utils
This package include all the components we need according to the design system.
Get Started :
- install the package
npm i bondsports-utils@latest
- wrap your app with the theme provider:
import {BnProvider} from 'bondsports-utils'
export const App = () => {
return (
<BnProvider>
// your app / router / whatever
</BnProvider>
)
}
- visit the storybook to see which components supported
Usage Examples
Button:
import {BnProvider,Button} from 'bondsports-utils'
export const App = () => {
return (
<BnProvider >
<Button theme="primary" sizer="M"
onClick={()=>alert("Hello new Bondsports utils package")}>
Submit
</Button>
</BnProvider>
)
}
with Dynamic styling (no need to pass colors object to each element in the BnProvider) :
import {BnProvider,Button} from 'bondsports-utils'
export const App = () => {
const {colors} = useColors()
return (
<BnProvider colors={colors}>
<Button theme="primary" sizer="M"
onClick={()=>alert("Hello new Bondsports utils package")}>
Submit
</Button>
</BnProvider>
)
}
Modal:
Controlled
import {ModalWindow,useModal} from 'bondsports-utils'
export const App = () => {
const {isShowing,toggle} = useModal()
return (
<BnProvider >
<button onClick={toggle}>open modal</button>
<ModalWindow toggle={toggle} isShowing={isShowing}>
just put here whatever you want in the modal
</ModalWindow>
</BnProvider>
)
}
UnControlled
import {Modal} from 'bondsports-utils'
export const App = () => {
const {colors} = useColors()
return (
<BnProvider colors={colors}>
<Modal body={<div>this is the body of the modal</div>}>
<Button theme="primary" sizer="M">
Submit
</Button>
</Modal>
</BnProvider>
)
}
Icons:
with no padding:
import {getIcon} from 'bondsports-utils'
export const App = () => {
return (
<BnProvider>
<div>
{getIcon("search")}
</div>
</BnProvider>
)
}
with padding (4px) just add variable 'l' / 'r':
import {getIcon} from 'bondsports-utils'
export const App = () => {
return (
<BnProvider>
<div>
{getIcon("search","r")}
</div>
</BnProvider>
)
}