React-bound-highlight NPM

React bound highlight

React component for connecting elements hover states

GitHub Workflow Status npm bundle size

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