Socket
Socket
Sign inDemoInstall

react-custom-checkbox

Package Overview
Dependencies
3
Maintainers
1
Versions
20
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 3.1.1 to 3.1.2

2

package.json
{
"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)
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc