react-bound-highlight

React bound highlight

React component for connecting elements hover states

Features:

• Highlight other components when a component is hovered
• Custom styles
• Lightweight
• No dependencies

Examples from storybook

Two directions bound:

Two directions bound with current element highlight ON:

Single direction bound:

Multiple elements in bound:

Custom highlight styles:

Can be used for building side by side editor like this:

Install

npm install react-bound-highlight --save

Basic usage

Wrap needed elements and specify unique id for connected components group:

import BoundHighlight from 'react-bound-highlight';
...
    <div>
      <BoundHighlight id="group1">Group 1</BoundHighlight>
      <BoundHighlight id="group2">Group 2</BoundHighlight>
      ...
      <BoundHighlight id="group1">Group 1</BoundHighlight>
      <BoundHighlight id="group2">Group 2</BoundHighlight>
    </div>
...

Props

Prop	Description	Type	Default
id*	unique group bound identifier	string
currentHoverHighlightOn	turn on hover highlight on current element	bool	false
oppositeHoverHighlightOff	turn off current component oposite highlight	bool	false
defaultStyleOff	turn off default style for highligting	bool	false
className	custom className	string	'BoundHighlight'
htmlTag	wrapper HTML tag	string	'span'
children*	nested elements	string, node

Classes

Use classes to override highlighting styles. Set defaultStyleOff=true prop to turn off default style.

Class	Desciption
BoundHighlight	Main class name, can by override via className prop
{className}--currentHover	Current hover state className
{className}--boundHover	Bound hover state className

Storybook

Review all examples on storybook:

npm run storybook

Run tests

npm run test

Linter

Run linter:

npm run lint

Fix formatting issues:

npm run lint:fix

License

MIT