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 |