Switch

v.2.0.0

Installation

yarn

yarn add @mercell/switch-react

pnpm

pnpm add @mercell/switch-react

npm

npm install --save @mercell/switch-react

The switch has necessary peerDependencies, please make sure that you have them in your project

"@mercell/tailwind": "^6.0.1",
"classnames": "^2.3.1",
"react": "^17.0.2" 

Usage

Using the Switch component is as simple as importing it like this.

import Switch from '@mercell/switch-react';

Live Editor

// You can play with code, with HTML tags and text as much as you want! const SwitchExample = () => { const [checked, setChecked] = React.useState<boolean>(false); return ( <div className="space-y-4"> <Switch leftLabel="Yearly" rightLabel="Monthly" checked={checked} onClick={() => setChecked((prev) => !prev)} /> </div> ) } render( <SwitchExample /> )

// You can play with code, with HTML tags and text as much as you want!
    const SwitchExample = () => {
    const [checked, setChecked] = React.useState<boolean>(false);
    return (
        <div className="space-y-4">
                <Switch
                leftLabel="Yearly"
                rightLabel="Monthly"
                checked={checked}
                onClick={() => setChecked((prev) => !prev)}
            />
        </div>
    )
}
render(
    <SwitchExample />
)

Result

Types, definitions, etc.

Types

SwitchProps

interface SwitchProps {
    rightLabel: string;
    leftLabel: string;
} & JSX.IntrinsicElements['input']

Name	Type	Default	Required	Description
rightLabel	string	-	yes	Label for the right-position of the switch
leftLabel	string	-	yes	Label for the left-position of the switch

Changelog

Change Log - @mercell/switch-react

This log was last generated on Fri, 11 Nov 2022 09:18:57 GMT and should not be manually modified.

2.0.0

Fri, 11 Nov 2022 09:18:57 GMT

Breaking changes

• New styling approach - use only tailwind classes, add tailwind-merge library

1.0.0

Thu, 15 Sep 2022 06:07:41 GMT

Breaking changes

• Migration to Tailwind3, React 18 and ViteJS from webpack.

0.0.2

Mon, 11 Jul 2022 12:58:41 GMT

Patches

• Switch component react

Figma

Sometimes it can take some time until Figma will render component inside embed iframe. Try to click plus icon to 'reset' initial loader. (Works only in Chrome)

Click me to open figma in the new card