LemonadeJS JavaScript reactive material switch
npm install @lemonadejs/switchOfficial website and documentation is here
Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
The LemonadeJS JavaScript Switch is a responsive and reactive component that enables users to make a binary choice through a visually appealing interface.
- Lightweight: The JavaScript Switch is only about 2 KBytes;
- Integration: It can be used as a standalone library or integrated with any modern framework;
You can install using NPM or using directly from a CDN.
To install it in your project using npm, run the following command:
``bash`
$ npm install @lemonadejs/switch
To use tabs via a CDN, include the following script tags in your HTML file:
`html`
Quick example with Lemonade
`javascript
import lemonade from 'lemonadejs';
import Switch from '@lemonadejs/switch';
import '@lemonadejs/switch/dist/style.css';
export default function App() {
const self = this;
return
;
}
``jsx
import React, { useRef } from 'react';
import Switch from '@lemonadejs/switch/dist/react';
import '@lemonadejs/switch/dist/style.css';export default function App() {
const switchRef = useRef();
return (
<>
>
);
}
`Quick example with Lemonade
`vue
`You can find more examples here in the official documentation.
#### Settings
| Attribute | Description |
| ------------------ | ---------------------------------------------------- | -------------------------- |
| text?: string | The displayed text. |
| value?: any | The current value of the component. |
| name?: string | The attribute
name` assigned to the switch element. |The LemonadeJS Switch is released under the MIT.