toggler-react
This is a react toggler. It can be used to build dropdowns, popovers, tooltips.
Installation
npm install toggler-react
or
yarn add toggler-react
Usage
import React, { useState } from 'react';
function Popover () {
const [isVisible, setVisiblity] = useState(false);
return (
<Toggler
overrideClass={"disable"}
onToggle={setVisiblity}
popoverVisible={isVisible}>
<Toggler.Field>
<div>
<p>Click me to open Popover</p>
</div>
</Toggler.Field>
<Toggler.Popover>
<div>
<p>Hi,This is a Popover</p>
</div>
</Toggler.Popover>
</Toggler>
);
}
Props
Property | Type | Required | Description |
---|---|---|---|
overrideClass | String | no | This is added as a class to the root of Popover |
popoverVisible | Boolean | yes | This tells the toggler to show or hide the popover |
onToggle | Function | yes | This is a function which takes a Boolean parameter and helps in setting the state of popoverVisible to either true or false |