Toggler-react NPM

toggler-react

This is a react toggler. It can be used to build dropdowns, popovers, tooltips.

Installation

npm install toggler-react

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