This package include all the components we need according to the design system.
This package include all the components we need according to the design system.
Get Started :
1. install the package
``
npm i bondsports-utils@latest
2. wrap your app with the theme provider:
`
import {BnProvider} from 'bondsports-utils'
export const App = () => {
return (
// your app / router / whatever
)
}
`
3. visit the storybook to see which components supported
`
import {BnProvider,Button} from 'bondsports-utils'
export const App = () => {
return (
onClick={()=>alert("Hello new Bondsports utils package")}>
Submit
)
}
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 (
onClick={()=>alert("Hello new Bondsports utils package")}>
Submit
)
}
`
import {ModalWindow,useModal} from 'bondsports-utils'
export const App = () => {
const {isShowing,toggle} = useModal()
return (
just put here whatever you want in the modal
)
}
`
`
import {Modal} from 'bondsports-utils'
export const App = () => {
const {colors} = useColors()
return (
Icons:
with no padding:
import {getIcon} from 'bondsports-utils' export const App = () => {
return (
{getIcon("search")}
)
}
with padding (4px) just add variable 'l' / 'r':
import {getIcon} from 'bondsports-utils' export const App = () => {
return (
{getIcon("search","r")}
)
}