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