react-custom-checkbox
Advanced tools
Comparing version 3.1.1 to 3.1.2
{ | ||
"name": "react-custom-checkbox", | ||
"version": "3.1.1", | ||
"version": "3.1.2", | ||
"description": "A simple and fully customizable React checkbox input component.", | ||
@@ -5,0 +5,0 @@ "author": "Adam 'BossBele' Beleko", |
# react-custom-checkbox | ||
## New Switch Component [See More](#switch-component) | ||
> A simple and fully customizable React checkbox input component. | ||
@@ -113,4 +115,87 @@ | ||
# Switch Component | ||
## 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 ( | ||
<> | ||
<h4>Default:</h4> | ||
<Switch /> | ||
<h4>Using Custom Icon:</h4> | ||
<Switch | ||
icon={ | ||
<svg viewBox="0 0 24 24" role="presentation" aria-hidden="true"> | ||
<path d="M9.86 18a1 1 0 01-.73-.32l-4.86-5.17a1.001 1.001 0 011.46-1.37l4.12 4.39 8.41-9.2a1 1 0 111.48 1.34l-9.14 10a1 1 0 01-.73.33h-.01z"></path> | ||
</svg> | ||
} | ||
/> | ||
<h4>Controlled with custom styles:</h4> | ||
<Switch | ||
checked={switchOneCheck} | ||
onChange={setSwitchOneCheck} | ||
indicatorStyle={indicatorStyle} | ||
trackStyle={trackStyle} | ||
checkedIconStyle={checkedIconStyle} | ||
checkedIndicatorStyle={checkedIndicatorStyle} | ||
checkedTrackStyle={checkedTrackStyle} | ||
/> | ||
</> | ||
); | ||
}; | ||
export default MyComponent; | ||
``` | ||
## License | ||
MIT © [BossBele](https://github.com/BossBele) |
64561
201