@hypersprite/toggle-state-rp

1.0.10 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i @hypersprite/toggle-state-rp

Weekly Downloads

3

Version

1.0.10

License

MIT

Unpacked Size

9.27 kB

Total Files

6

Last publish

Collaborators

  • hypersprite