|
| checked | state of checkbox | Bool | _ true
_ false | false |
| disabled | checkbox input active/inactive state | Bool | _ true
_ false | false |
| label | checkbox label text | String | _ "Cheese"
_ "Lettuce" | |
| onChange | function triggered when checked state changes | Func | Usage
\* (checked, event) => console.log(checked, event) | null |
| size | size of checkbox | Number | _ 30
_ 15
| 18 |
| right | label position right? | Bool | _ true
_ false | false |
| name | checkbox input name | String | _ "toppings"
_ "hobbies" | "" |
| value | checkbox input value | String | _ "cheese"
_ "lettuce" | "" |
| style | checkbox css style | Object | \* {margin: 10}
| {} |
| className | checkbox css class(es) | String | _ "p-5 mb-3"
_ "uk-margin" | "" |
| borderColor | color of checkbox border | String | _ "red"
_ "#fff" | "#D7C629" |
| borderRadius | radius of checkbox border | Number | _ 10
_ 0 | 5 |
| borderStyle | style of checkbox border | Object | _ "solid"
_ "dashed"
\* "dotted" | "solid" |
| borderWidth | thickness of checkbox border | Number | _ 4
_ 0 | 2 |
| labelClassName | label text css class(es) | String | _ "p-5 mb-3"
_ "uk-margin" | "" |
| labelStyle | label text css style | Object | \* {margin: 10} | { marginLeft: 5 } |
| containerClassName | checkbox & label container css class(es) | String | _ "p-5 mb-3"
_ "uk-margin" | "" |
| containerStyle | checkbox & label container css style | Object | \* {margin: 10} | {} |

Switch Component

!Demo Video

Usage

`jsx
import React from "react";
import Switch from "react-custom-checkbox/switch";

const checkedTrackStyle = {
opacity: 1,
transition: 'all 0.25s ease-in-out',
}

const checkedIndicatorStyle = {
background: '#44aa44',
transform: 'translateX(30px)',
}

const checkedIconStyle = {
opacity: 1,
transition: 'all 0.25s ease-in-out',
}

const indicatorStyle = {
alignItems: 'center',
background: '#f34334',
borderRadius: 24,
bottom: 2,
display: 'flex',
height: 24,
justifyContent: 'center',
left: 2,
outline: 'solid 2px transparent',
position: 'absolute',
transition: '0.25s',
width: 24,
}

const trackStyle = {
background: '#e5efe9',
border: '1px solid #e6e6e6',
borderRadius: 15,
cursor: 'pointer',
display: 'flex',
height: 28,
marginRight: 12,
position: 'relative',
width: 60,
}

const MyComponent = () => {
const [switchOneCheck, setSwitchOneCheck] = React.useState(false);

return (
<>


Default:

Using Custom Icon:

icon={



}
/>

Controlled with custom styles:

checked={switchOneCheck}
onChange={setSwitchOneCheck}
indicatorStyle={indicatorStyle}
trackStyle={trackStyle}
checkedIconStyle={checkedIconStyle}
checkedIndicatorStyle={checkedIndicatorStyle}
checkedTrackStyle={checkedTrackStyle}
/>

);
};

export default MyComponent;
`

Props

| Prop | Explanation | Data Type | (Sample) Values | Default |
| ------------------ | :-------------------------------------------: | :----------: | :--------------------------------------------------------------------: | :---------------------------------------------------------------------------: |
| icon | switch button icon/element | Object (jsx) | \* | |
| checked | state of switch | Bool | _ true
_ false | false |
| disabled | switch input active/inactive state | Bool | _ true
_ false | false |
| onChange | function triggered when checked state changes | Func | Usage
\* (checked, event) => console.log(checked, event) | null |
| name | switch input name | String | _ "toppings"
_ "hobbies" | "" |
| value | switch input value | String | _ "cheese"
_ "lettuce" | "" |
| label | switch label text | String | _ "Cheese"
_ "Lettuce" | |
| isLabelRight | label position right? | Bool | _ true
_ false | false |
| style | switch css style | Object | \* {margin: 10}
| {clip: 'rect(0 0 0 0)',clipPath: 'inset(50%)',height: 1,overflow: 'hidden',position: 'absolute',whiteSpace: 'nowrap',width: 1} |
| className | switch css class(es) | String | _ "p-5 mb-3"
_ "uk-margin" | "" |
| iconClassName | switch button icon/element css class(es) | String | _ "p-5 mb-3"
_ "uk-margin" | "" |
| iconStyle | switch button icon/element css styles | Object | \* {margin: 10} | {fill: '#fff',height: 20,width: 20,opacity: 0,transition: 'all 0.25s ease-in-out'} |
| checkedIconStyle | switch button icon/element css styles when checked | Object | \* {margin: 10} | {opacity: 1,transition: 'all 0.25s ease-in-out'} |
| indicatorClassName | switch button css class(es) | String | _ "p-5 mb-3"
_ "uk-margin" | "" |
| indicatorStyle | switch button css styles | Object | \* {margin: 10} |{alignItems: 'center',background: '#121943',borderRadius: 24,bottom: 2,display: 'flex',height: 24,justifyContent: 'center',left: 2,outline: 'solid 2px transparent',position: 'absolute',transition: '0.25s',width: 24}|
| checkedIndicatorStyle| switch button css styles when checked | Object | \* {margin: 10} | {background: '#121943',transform: 'translateX(30px)'} |
| trackClassName | switch track css class(es) | String | _ "p-5 mb-3"
_ "uk-margin" | "" |
| trackStyle | switch track css styles | Object | \* {margin: 10} | {background: '#e5efe9',border: '1px solid #5a72b5',borderRadius: 100,cursor: 'pointer',display: 'flex',height: 30,marginRight: 12,position: 'relative',width: 60} |
| checkedTrackStyle | switch track css styles when checked | Object | \* {margin: 10} | {border: '1px solid transparent',boxShadow: '0px 0px 0px 2px #121943',opacity: 1,transition: 'all 0.25s ease-in-out'} |
| labelClassName | label text css class(es) | String | _ "p-5 mb-3"
_ "uk-margin" | "" |
| labelStyle | label text css styles | Object | \* {margin: 10} | |
| containerClassName | switch & label container css class(es) | String | _ "p-5 mb-3"
_ "uk-margin" | "" |
| containerStyle | switch & label container css styles | Object | \* {margin: 10} | {alignItems: 'center',borderRadius: 100,display: 'flex',fontWeight: 700,marginBottom: 16,} |
| wrapperClassName | whole component wrapper css class(es) | String | _ "p-5 mb-3"
_ "uk-margin" | "" |
| wrapperStyle | whole component wrapper css styles | Object | \* {margin: 10} | { display: 'inline-block' }` |

License

MIT © BossBele
@ chibokocl