Better hover, active and focus states than CSS pseudo-classes, and a callback when the interactive state changes.
npm install react-interactive  !npm type definitions
- Better interactive states than CSS pseudo classes
- hover, active, mouseActive, touchActive, keyActive
- focus, focusFromMouse, focusFromTouch, focusFromKey
- Callback for interactive state changes
- Know when the hover/active/focus state is entered/exited (impossible to do with CSS)
- Style interactive states with CSS, inline styles, and CSS-in-JS libraries
- Eliminates the CSS sticky :hover bug on touch devices
- Allows you to only add focus styles when focus is from the keyboard
---
Code is in the /demo folder, or open the demo in CodeSandbox
---
Basics ⚡️ Props ⚡️ createInteractive ⚡️ eventFrom ⚡️ TypeScript ⚡️ FAQ
---
Install, as prop, Interactive state, CSS, CSS-in-JS, Inline styles, Interactive state changes, Interactive state in children, Extending
---
``shell`
npm install --save react-interactive
`js
import { Interactive } from 'react-interactive';
const App = () =>
`
---
React Interactive accepts a polymorphic as prop that can be a string representing a DOM element (e.g. "button", "a", "div", etc), or a React component (e.g. React Router's Link, etc).
`js
import { Interactive } from 'react-interactive';
import { Link } from 'react-router-dom';
const App = () => (
<>
My Link
My React Router Link
);
`
---
The state object used by React Interactive to determine how the component is rendered. The interactive state object is also passed to the onStateChange callback and children (when children is a function).
`ts`
interface InteractiveState {
hover: boolean;
active: 'mouseActive' | 'touchActive' | 'keyActive' | false;
focus: 'focusFromMouse' | 'focusFromTouch' | 'focusFromKey' | false;
}
- hover Mouse on the element (unlike CSS pseudo classes the hover state is only entered from mouse input which eliminates the CSS sticky :hover bug on touch devices).active
-
- Mouse on the element and mouse button down.touchActive
- Touch point on the element.keyActive
- Element has focus and the enter key is down (or space bar for some elements).focus
-
- Element has focus and focus was entered from mouse input.focusFromTouch
- Element has focus and focus was entered from touch input.focusFromKey
- Element has focus and focus was entered from keyboard input (e.g. tab key).
---
CSS classes for the current state are automatically added for easy styling with CSS or CSS-in-JS libraries like Styled Components, Emotion, and Stitches.
- Hover state adds a hover class.active
- Active state adds both an class and an [input]Active class, e.g. mouseActive.focus
- Focus state adds both a class and a focusFrom[input] class, e.g. focusFromKey.className
- For a full class list see interactive props (the class names for each state can be changed using props).
- See this CodeSandbox for a live example using CSS.
`js
import { Interactive } from 'react-interactive';
const App = () => (
// add a className to target the element in CSS
My Button
);
`
`css
/ use compound selectors in CSS to style the interactive states /
.my-button.hover, .my-button.active: {
color: green;
}
.my-button.focusfromkey: {
outline: 2px solid green;
}
`
---
Use the added CSS classes to style the interactive states with CSS-in-JS libraries like Styled Components, Emotion, and Stitches. Live examples in CodeSandbox are available for Styled Components and Stitches (also the demo app is built using Stitches).
> React Interactive includes a createInteractive(as) function with some predefined DOM elements, for example Interactive.Button, for easy use with CSS-in-JS. For more see Extending .
`js
import { Interactive } from 'react-interactive';
import { styled } from '@stitches/react';
const StyledButton = styled(Interactive.Button, {
'&.hover, &.active': {
color: 'green',
},
'&.focusFromKey': {
outline: '2px solid green',
},
});
const App = () =>
`
---
React Interactive uses a separate style prop for each state for easy inline styling.
- Hover state uses the hoverStyle prop.activeStyle
- Active state uses both an prop and an [input]ActiveStyle prop.focusStyle
- Focus state uses both a prop and a focusFrom[input]Style prop.style
- For a full list see interactive props.
- See this CodeSandbox for a live example using inline styles.
`js
import { Interactive } from 'react-interactive';
const hoverAndActiveStyle = {
color: 'green',
};
const focusFromKeyStyle = {
outline: '2px solid green',
};
const App = () => (
hoverStyle={hoverAndActiveStyle}
activeStyle={hoverAndActiveStyle}
focusFromKeyStyle={focusFromKeyStyle}
>
My Button
);
`
---
React Interactive accepts an onStateChange prop callback that is called each time the state changes with both the current and previous states.
`js
import * as React from 'react';
import { Interactive } from 'react-interactive';
const App = () => {
const handleInteractiveStateChange = React.useCallback(
({ state, prevState }) => {
// both state and prevState are of the shape:
// {
// hover: boolean,
// active: 'mouseActive' | 'touchActive' | 'keyActive' | false,
// focus: 'focusFromMouse' | 'focusFromTouch' | 'focusFromKey' | false,
// }
},
[],
);
return (
My Button
);
};
`
---
React Interactive uses the children as a function pattern to pass the current interactive state to its children.
`js
import { Interactive } from 'react-interactive';
const App = () => (
{({ hover, active, focus }) =>
Current state - active: ${active}, hover: ${hover}, focus: ${focus}
}
);
`
---
Sometimes it is useful to extend the polymorphic component with a predefined as prop, but without additional logic. This is especially useful when using React Interactive with CSS-in-JS libraries and other polymorphic components.
React Interactive provides a createInteractive(as) function that returns a fully typed component with the as prop predefined. Also, some common DOM elements are available using Interactive.Tagname (for example Interactive.Button). For more see Using createInteractive.
`js
// using with CSS-in-JS
import { Interactive, createInteractive } from 'react-interactive';
import { styled } from '@stitches/react';
import { Link } from 'react-router-dom';
const StyledButton = styled(Interactive.Button, {});
const StyledRouterLink = styled(createInteractive(Link), {});
const App = () => (
<>
);
`
`js
// using with another polymorphic component
import { Interactive, createInteractive } from 'react-interactive';
import { Link } from 'react-router-dom';
import { SomePolymorphicComponent } from '...';
const InteractiveRouterLink = createInteractive(Link);
const App = () => (
<>
);
`
---
as, onStateChange, children, disabled, interactive className, interactive style, useExtendedTouchActive, ref
---
Default value: "button"
React Interactive accepts a polymorphic as prop that can be a string representing a DOM element (e.g. "button, "a", "div", etc), or a React component (e.g. React Router's Link, etc).
`js
import { Interactive } from 'react-interactive';
import { Link } from 'react-router-dom';
const App = () => (
<>
My React Router Link
);
`
> Note that if as is a React component, then the component needs to pass through props to the element that it renders, including the ref prop using React.forwardRef(). Most libraries designed for composability do this by default, including React Router's component.
---
Default value: undefined
Callback function that is called each time the interactive state changes with both the current and previous interactive states (passed in as a single argument of the form { state, prevState }). See Reacting to interactive state changes.
---
Default value: undefined
If children is a ReactNode (anything that React can render, e.g. an Element, Fragment, string, boolean, null, etc) then it is passed through to React to render normally.
If children is a function then it is called with an object containing the current interactive state (note that the function must return a ReactNode that React can render). See Using the interactive state in children.
`js
import { Interactive } from 'react-interactive';
const App = () => (
{({ hover, active, focus }) => {
// hover: boolean,
// active: 'mouseActive' | 'touchActive' | 'keyActive' | false,
// focus: 'focusFromMouse' | 'focusFromTouch' | 'focusFromKey' | false,
// ...
// must return something that React can render
return Current state - active: ${active}, hover: ${hover}, focus: ${focus};
}}
);
`
---
Default value: false
Passing in a disabled prop is an easy way to temporarily disable a React Interactive component without changing the other props. When disabled is true:
- The disabledClassName and disabledStyle props will be used for styling the disabled component.disabled
- will be passed through to the DOM element if it is a