React props-on-event

Apply props to all children whenever a certain event occurs - just by listing it as a child.

<OnEvent
   propsOnEvent={{
       style: {
           color: 'red',
       },
   }}
   events={[['onMouseOver', 'onMouseOut']]}
>
   <button
       style={{
           // Turns red on hover
           color: 'blue',
           // Is unaltered on hover
           backgroundColor: 'green',
       }}
   >
       Button 1
   </button>
   <span
       style={{
           // Turns red on hover
           color: 'green'
       }}
   >
       Button 2
   </span>
</OnEvent>

---

Install

 $ npm install props-on-event

 $ yarn add props-on-event

Usage

When passed only children, they are left unmodified:

import { OnEvent } from 'props-on-event';

<OnEvent>
    <div className='my-div'></div>
</OnEvent>

// -->

<div className='my-div'></div>

When passed a set of events, each (top-level) child begins listening for those events. However, nothing happens yet - until a set of propsOnEvent is specified.

import { OnEvent } from 'props-on-event';

<OnEvent
    // In the form of [trigger to turn on props, trigger to turn off props][]
    events={[['onMouseOver', 'onMouseOut'], ['onMouseEnter', 'onMouseLeave']]}
    propsOnEvent={{
        // Objects are merged - e.g.:
        // style: { 
        //      background-color: 'green', 
        //      color: 'blue', 
        // }
        // would in this case become:
        // {
        //      background-color: 'green',
        //      color: 'yellow',
        // }
        style: {
            color: 'yellow',
        },
        // string, number, boolean, and array types are simply overwritten
        className: 'new-div'
    }}
>
    // Class becomes 'new-div' on hover
    <div className='my-div'>
        
    </div>
</OnEvent>

Props

Prop	Type	Default	Example	Description
children	ReactElement \| ReactElement[]	Required	<div />	The children onto which to apply the props (when active)
propsOnEvent	{ [key: string]: any } \| undefined	{}	{ style: { color: 'red' } }	The props to overwrite/merge with the existing props (when activated)
events	[string, string][] \| undefined	[['onMouseOver', 'onMouseOut']]	[['onMouseOver', 'onMouseOut'], ['onMouseEnter', 'onMouseLeave']]	The events to trigger/disable the 'active' state props, in the form of [trigger to turn on, trigger to turn off][]
className	string \| undefined	<></> (no wrapper, children returned as-is)	'wrapperClass'	The className of the wrapper element
component	ReactElement \| undefined	none if className === undefined, <div /> otherwise	<span />	The wrapper element within which to contain the children