redux-toggle

redux-toggle is a portal for hover and click events.

What can this be used for?

• Tooltips

  When the user hovers an element, you want the tooltip to appear. Wrap the element with a <Toggleable showOnHover /> and wrap the tooltip with a <ToggleEffect />.

• Dropdowns

  When the user clicks a button, you want a panel to appear. Wrap the button with a <Toggleable toggleOnClick /> and wrap the panel with a <ToggleEffect />.

• Modals

  When the user clicks a button, you want a modal to appear. Wrap the button with a <Toggleable showOnClick /> and wrap the modal with a <ToggleEffect />. Inside the <ToggleEffect />, wrap the modal close button with a <Toggleable hideOnClick />.

• Charts

  Let's say you have a line chart. When the user hovers a point in the line, you want to increase the size of the point and highlight the related date. Wrap the point with a <Toggleable showOnHover /> and <ToggleEffect /> and wrap the date with a <ToggleEffect />.

The basic idea is to take the idea of CSS :hover and allow it to work on distant components.

Demo

Try it

Usage

import {
  reducer as toggleReducer,
  Toggleable,
  ToggleEffect,
} from 'redux-toggle';
 
// configureStore
const reducer = combineReducers({
  toggle: toggleReducer,
});
 
// Tooltip example
// Group identifies a group of ids that are exclusive.
// In this case, we only want a single tooltip to appear at a time (all tooltip ids are exclusive).
// So all tooltips belong to a single group.
<Toggleable
  group="tooltip"
  id="tooltip"
  showOnHover
>
  <div>
    Hover me
  </div>
</Toggleable>
 
// The child is shown or hidden based on whether the Toggleable is hovered.
<ToggleEffect
  group="tooltip"
  id="tooltip"
>
  <div>
    Tooltip
  </div>
</Toggleable>
 
// There are a number of options available for triggering the toggle.
// To trigger the toggle when the user hovers the Toggleable, use showOnHover. This is useful for a tooltip.
// To flip the toggle when the user clicks the Toggleable, use toggleOnClick. This is useful for a dropdown button.
// To set the toggle when the user hovers the Toggleable, use showOnClick. This is useful for a modal open button.
// To unset the toggle when the user hovers the Toggleable, use hideOnClick. This is useful for a modal close button.
<Toggleable
  showOnHover
  toggleOnClick
  showOnClick
  hideOnClick
>
  {/* ... */}
</Toggleable>
 
// If you want more control over the child, pass a function as the child.
// This allows you to set conditional styles on the child based on whether the Toggleable is hovered.
<ToggleEffect
  group="tooltip"
  id="tooltip"
>
  (({ active }) => (
    <div>
      {active ? 'It is active' : 'It is not active'}
    </div>
  ))
</Toggleable>
 
// You can pass custom data from a source Toggleable to a destination ToggleEffect.
// The custom data will be spread onto the ToggleEffect child's props.
// If you want to populate the ToggleEffect child with Redux, you can use data to pass ids, then use Redux to look up the full objects from the state based on these ids.
<Toggleable
  data={{ userId: 1 }}
  group="modal"
  id="modal"
  showOnClick
>
  <div>
    Click me
  </div>
</Toggleable>
 
<ToggleEffect
  group="modal"
  id="modal"
>
  <Modal />
</Toggleable>
 
function Modal({ userId }) {
  return (
    <div>
      The user is {userId}.
    </div>
  );
}
 
// Let's say you have multiple Toggleables but one ToggleEffect (for example, different items in a list can trigger the same edit modal).
// In the Toggleable, pass different data for different items.
// In the ToggleEffect, omit the id.
// In the modal, you will receive the data for the item that triggered the modal. This allows you to determine which item the user is editing.
<ToggleEffect group="modal">
  <Modal />
</Toggleable>

Setup

yarn
yarn start
# Visit http://localhost:8080