1.1.0 ā¢ Published 4 years ago
react-lunar-toggle v1.1.0
react-lunar-toggle
š š š š š š š š š
react-toggle with lunar phases, for fancy dark mode toggles.
Props
Props except date: Date inherited from react-toggle, further info can be found at react-toggle repo.
The component takes the following props.
Prop | Type | Description |
---|---|---|
date | Date | Optional. If not set today's date will be used |
checked | boolean | If true , the toggle is checked. If false , the toggle is unchecked. Use this if you want to treat the toggle as a controlled component |
defaultChecked | boolean | If true on initial render, the toggle is checked. If false on initial render, the toggle is unchecked. Use this if you want to treat the toggle as an uncontrolled component |
onChange | function | Callback function to invoke when the user clicks on the toggle. The function signature should be the following: function(e) { } . To get the current checked status from the event, use e.target.checked . |
onFocus | function | Callback function to invoke when field has focus. The function signature should be the following: function(e) { } |
onBlur | function | Callback function to invoke when field loses focus. The function signature should be the following: function(e) { } |
name | string | The value of the name attribute of the wrapped \<input> element |
value | string | The value of the value attribute of the wrapped \<input> element |
id | string | The value of the id attribute of the wrapped \<input> element |
icons | object | If false , no icons are displayed. You may also pass custom icon components in icons={{{checked: <CheckedIcon />, unchecked: <UncheckedIcon />}} |
aria-labelledby | string | The value of the aria-labelledby attribute of the wrapped \<input> element |
aria-label | string | The value of the aria-label attribute of the wrapped \<input> element |
disabled | boolean | If true , the toggle is disabled. If false , the toggle is enabled |
Installation
npm install react-lunar-toggle
Usage
import LunarToggle from 'react-lunar-toggle'
...
<LunarToggle />
example
import LunarToggle from 'react-lunar-toggle'
const App = props => {
const [darkMode, toggleDarkMode] = useState(false)
return (
<LunarToggle
checked={darkMode}
onChange={(e) => toggleDarkMode(e.target.checked)}
/>
)
}
## Styling
you need to add the styles from [src/styles.css](src/styles.css)