Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
reacttoggles
Advanced tools
A collection of commonly used toggle buttons implemented in react with internal css
A simple collection of decently customizable toggle buttons available in 3 basic styles namely ios, skewed and flip. Since this module is more of a plug and play, it uses inline css to style the toggle button so that no external css styles have to be imported.
npm install reacttoggles
The demo with live examples can be viewed here.
The reaact toggele comes in 3 variants. The same can be imported and used in the project using
import { IosToggle, SkewToggle, FlipToggle } from 'reacttoggles'
var Toggle = require('reacttoggles')
var IosToggle = Toggle.IosToggle
var SkewToggle = Toggle.SkewToggle
var FlipToggle = Toggle.FlipToggle
Writing a small component like a toggle button is a pain since this doesn't come out of the box with frameworks like bootstrap
. Sometimes, all you need is a simple import with a plug and play feature withiut any setup. This is what this modules helps to achieve
https://github.com/nerdchacha/react-toggles
Prop | Type | Description | Valid | Demo |
---|---|---|---|---|
checked | bool | If true , the toggle is checked. If false , the toggle is unchecked | All | demo1 demo2 |
fontSize | number | Since all dimensions are set using em , this will the fontSize os the em value of the wrapper div. If you want to give the size using css, don't use this property and instead give fontSize using css instead. | All | demo |
disabled | bool | If true , the toggle is disabled. If false , the toggle is enabled | All | demo |
attributes | object | A key value pair of attributes that needs to be set for the input element. This may include attributes like name , id etc | All | demo |
handleChange | function | A callback function that is executed everytime the toggle value changes. The current toggle value is passed as a parameter to this function | All | demo |
handleClick | function | A callback function that is executed everytime the toggle is clicked. The current synthetic event is passed as a parameter to this function | All | demo |
toggleIcon | object | Configuration for the toggle button. | IosToggle | demo |
onProps | object | Configuration for on state | All | demo1 demo2 |
offProps | object | Configuration for off state | All | demo1 demo2 |
toggleIcon : {
component: String OR ReactElement
style: {
backgroundColor: String,
color: String,
}
}
The checkbox has a default value of id
and name
as toggle
. Please make sure you provide different values using the attribute
props in case you are using more than one toggle button
in your project
component
: string
OR React Element
(usually icon) to be displayed when toggle is in on state (only for IosToggle
)
backgroundColor
: background color of the toggle when the toggle is in on state (only for IosToggle
)
color
: font color of the toggle when the toggle is in on state (only for IosToggle
)
onProps : {
component: String OR ReactElement
style: {
backgroundColor: String,
color: String,
toggleBorder: String,
buttonBorder: String
}
}
component
: string
OR React Element
(usually icon) to be displayed when toggle is in on state
backgroundColor
: background color of the toggle when the toggle is in on state
color
: font color of the toggle when the toggle is in on state
toggleBorder
: toggle button/bar border color when the toggle is in on state (only for IosToggle
)
buttonBorder
: toggle button color when the toggle is in on state (only for IosToggle
)
offProps : {
component: String OR ReactElement
style: {
backgroundColor: String,
color: String,
toggleBorder: String,
buttonBorder: String
}
}
component
: string
OR React Element
(usually icon) to be displayed when toggle is in off state
backgroundColor
: background color of the toggle when the toggle is in off state
color
: font color of the toggle when the toggle is in off state
toggleBorder
: toggle button/bar border color when the toggle is in off state (only for IosToggle
)
buttonBorder
: toggle button color when the toggle is in off state (only for IosToggle
)
We understand that using inline styles is such a pain in the neck specially when you want to override some properties using an external css file.
with the v0.2.0, the module comes with 3 default css stylesheets namely ios.css
, skew.css
and flip.css
available inside the dist
folder.
You can now import just the raw toggle (without the inline wrapper element) using
var Toggle = require('reacttoggles').Toggle
OR
let { Toggle } from 'reacttoggles'
Considering you are running through webpack
, you can then require any of the 3 css, depending on your requirement, in the same file using
require('reacttoggles/dist/ios.css')
require('reacttoggles/dist/skew.css')
require('reacttoggles/dist/flip.css')
You can finally use the toggle using
<Toggle type='ios' />
<Toggle type='skew' />
<Toggle type='flip' />
type
prop is required and must be provided for the css to be applied properly.<Toggle type='skew' onProps={{component: <FontAwesome name='times' />}} />
will work fine
but
<Toggle type='skew' onProps={{style: backgroundColor: 'orange'}} />
will make no differene to the css
you can clone the repo and start the dev mode using npm start
command
The modules currently comes with a test setup but with very minimilistic test cases. Test can be run using from the module directry using the script
npm run test:local
changelog can we viewed here
Yatin Gera initial work and setup
https://github.com/nerdchacha/react-toggles/issues
This project is licensed under the MIT License
FAQs
A collection of commonly used toggle buttons implemented in react with internal css
We found that reacttoggles demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.