0.1.6 • Published 4 years ago
my-checkbox v0.1.6
my-checkbox
A checkbox component for react
Install
npm install --save my-checkbox
Real World Examples
Single instance of MyCheckbox
import React, { Component } from 'react'
import MyCheckbox from 'my-checkbox'
const fruits = [ // with initial value
{ txt: 'Apples', checked: false },
{ txt: 'Oranges', checked: true }
]
class App extends Component {
state = {
favouriteFruits: []
}
handler (me, value) {
this.setState({ favouriteFruits: value })
}
render () {
const { favouriteFruits } = this.state
return (
<MyCheckbox
label='Peters favourite fruits'
items={fruits}
value={favouriteFruits}
handler={this.handler.bind(this)}
/>
)
}
}
export default App
Multiple instances of MyCheckbox
eg: 1 with single item list
import React, { Component } from 'react'
import MyCheckbox from 'my-checkbox'
const fruits = [ // with initial value
{ txt: 'Apples', checked: false },
{ txt: 'Oranges', checked: false }
]
class App extends Component {
state = {
localStore: {}
}
handler (me, value) {
const localStore = { ...this.state.localStore }
localStore[me] = value
this.setState({ localStore })
}
render () {
const { localStore } = this.state
return (
<div>
<MyCheckbox
items={fruits}
me='peters-fav-fruit-ref' // used to refer this checkbox
label="Peter's favourite fruits"
handler={this.handler.bind(this)}
value={localStore['peters-fav-fruit-ref']} // use value of me
/>
<MyCheckbox
items={fruits}
me='lois-fav-fruit-ref'
label="Lois's favourite fruits"
handler={this.handler.bind(this)}
value={localStore['lois-fav-fruit-ref']}
/>
</div>
)
}
}
export default App
eg: 2 with multiple item list
import React, { Component } from 'react'
import MyCheckbox from 'my-checkbox'
const fruits = [
{ txt: 'Apples', checked: false },
{ txt: 'Oranges', checked: false }
]
const inventions = [
{ txt: 'Time Machine', checked: true },
{ txt: 'Laser Pistol', checked: true },
{ txt: 'Freeze Gun', checked: false },
{ txt: 'Weather Control Device', checked: false }
]
class App extends Component {
state = {
localStore: {}
}
handler (me, value) {
const localStore = { ...this.state.localStore }
localStore[me] = value
this.setState({ localStore })
}
logStore () {
const { localStore } = this.state
console.log('log localStore', localStore)
}
render () {
const { localStore } = this.state
return (
<div>
<MyCheckbox
items={fruits}
me='peters-fav-fruit-ref' // used to refer this checkbox
label="Peter's favourite fruits"
handler={this.handler.bind(this)}
value={localStore['peters-fav-fruit-ref']} // use value of me
/>
<MyCheckbox
items={fruits}
me='lois-fav-fruit-ref' // use camelCase
label="Lois's favourite fruits"
handler={this.handler.bind(this)}
value={localStore['lois-fav-fruit-ref']}
/>
<MyCheckbox
items={inventions}
me='stewie-invention-ref'
label="Stewie's inventions"
handler={this.handler.bind(this)}
value={localStore['stewie-invention-ref']}
/>
<button onClick={this.logStore.bind(this)}>Log Store</button>
</div>
)
}
}
export default App
Plug your Style
You can plug any style you like. First create an object with following keys and values of preferred class names. Second pass that object as a prop to MyCheckbox component.
- label ( heading text )
- check ( checkbox style )
- txt ( item text style )
Example of such object would something like this
const style = {
label: 'class-name', // one class name
check: '', // no class name
txt: 'class-name-1 class-name-2' // multiple class names
}
This flexible structure allows you to plug any styles on the fly. Here is an example where I used boostrap css. You can plug with any style you like.
####Example 1: with bootstrap-css
import React, { Component } from 'react'
import MyCheckbox from 'my-checkbox'
import 'bootstrap-css'
const fruits = [
{ txt: 'Apples', checked: false },
{ txt: 'Oranges', checked: true }
]
const style = {
label: 'display-4',
check: '',
txt: 'col-md-2 text-muted'
}
class App extends Component {
state = {
favouriteFruits: []
}
handler (me, value) {
this.setState({ favouriteFruits: value })
}
render () {
const { favouriteFruits } = this.state
return (
<div className="container">
<MyCheckbox
items={fruits}
style={style}
value={favouriteFruits}
label='Peters favourite fruits'
handler={this.handler.bind(this)}
/>
</div>
)
}
}
export default App
License
MIT © saahithyan