@hypersprite/toggle-state-rp

'toggle' state render props controller

Stats

StarsIssuesVersionUpdatedCreatedSize
@hypersprite/toggle-state-rp
051.0.102 years ago4 years agoMinified + gzip package size for @hypersprite/toggle-state-rp in KB

Readme

Toggle State Render Props Component

Demo codesandbox.io...

This is a Render Prop Component, this style of component was introduced by Michael Jackson of react-router fame. See Official React Render Props docs for more information.

Accepts an initialState and passes as props: a toggle boolean state and three functions to update the toggle state.

Usage

Install

npm install --save @hypersprite/toggle-state-rp

Import

import ToggleState from '@hypersprite/toggle-state-rp';

Usage

Place child component inside function return and use the parameters.

parent-container.jsx

// some place in your component, you need a DialogMessage

    <ToggleState
      initialState
      render={toggleStateRP => (
        <DialogMessage
          {...toggleStateRP}
        />
      )}
    />

dialog-message.jsx

const DialogMessage = ({ toggle, handleToggle }) => {
  return (
    <div>
      <p>
        {`Toggle is: ${toggle}`}
      </p>
      <button onClick={handleToggle}>Toggle</button>
    </div>
  );
};

API

Receives Props

prop name type values description
initialState bool true or false* Sets initial state

New Passed Props

prop name type values description
toggle bool true or false* The State being toggled
handleFalse function Call to set toggle to false
handleToggle function Call to toggle toggle
handleTrue function Call to set toggle to true

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.