0.9.59 • Published 2 years ago
bondsports-calendar v0.9.59
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>
)
}
0.9.59
2 years ago
0.9.57
2 years ago
0.9.58
2 years ago
0.9.45
2 years ago
0.9.23
2 years ago
0.9.46
2 years ago
0.9.24
2 years ago
0.9.25
2 years ago
0.9.26
2 years ago
0.9.21
2 years ago
0.9.22
2 years ago
0.9.49
2 years ago
0.9.27
2 years ago
0.9.28
2 years ago
0.9.40
2 years ago
0.9.20
3 years ago
0.9.15
3 years ago
0.9.12
3 years ago
0.9.13
3 years ago
0.9.14
3 years ago
0.9.11
3 years ago
0.9.9
3 years ago
0.9.10
3 years ago
0.9.8
3 years ago
0.9.7
3 years ago
0.9.6
3 years ago
0.9.3
3 years ago
0.9.5
3 years ago
0.9.1
3 years ago
0.9.0
3 years ago