11# React Interactive
22
3- [ ![ npm] ( https://img.shields.io/npm/dm/react-interactive?label=npm )] ( https://www.npmjs.com/package/react-interactive ) [ ![ npm bundle size (version)] ( https://img.shields.io/bundlephobia/minzip/react-interactive@next ?color=purple )] ( https://bundlephobia.com/result?p=react-interactive@next ) ![ npm type definitions] ( https://img.shields.io/npm/types/react-interactive?color=blue )
3+ [ ![ npm] ( https://img.shields.io/npm/dm/react-interactive?label=npm )] ( https://www.npmjs.com/package/react-interactive ) [ ![ npm bundle size (version)] ( https://img.shields.io/bundlephobia/minzip/react-interactive?color=purple )] ( https://bundlephobia.com/result?p=react-interactive ) ![ npm type definitions] ( https://img.shields.io/npm/types/react-interactive?color=blue )
44
55- Better interactive states than CSS pseudo classes
66 - ` hover ` , ` active ` , ` mouseActive ` , ` touchActive ` , ` keyActive `
@@ -25,10 +25,8 @@ Code is in the [`/demo`](/demo) folder, or open the [demo in CodeSandbox](https:
2525
2626## Basics
2727
28- > v1 is in pre-release so use the ` @next ` tag to install it, v0 is available [ here] ( https://github.com/rafgraph/react-interactive/tree/v0.9.5 )
29-
3028``` shell
31- npm install --save react-interactive@next
29+ npm install --save react-interactive
3230```
3331
3432``` js
@@ -698,7 +696,7 @@ React Interactive fixes the sticky hover bug by only entering the `hover` state
698696## FAQ
699697
700698- ** How do I manually set focus on an ` <Interactive> ` component ? **
701- - Use a ` ref ` a call ` focus() ` on the element (this is standard React ). To enter a specific ` focusFrom[Input] ` state use [` setEventFrom ` ](#seteventfrominputtype ).
699+ - Pass in a ` ref ` prop and call ` focus() ` on the element (this is standard React ). To enter a specific ` focusFrom[Input] ` state use [` setEventFrom ` ](#seteventfrominputtype ).
702700- ** How do I disable an ` <Interactive> ` component ? **
703701 - Pass in a [` disabled ` boolean prop ](#disabled - boolean ).
704702- ** How do I use ` <Interactive> ` with another polymorphic component ? **
@@ -710,9 +708,9 @@ React Interactive fixes the sticky hover bug by only entering the `hover` state
710708 - See [Styling with CSS](#styling -with -css ), and also [this CodeSandbox](https : // codesandbox.io/s/react-interactive-css-style-example-ttl0t) for a live example.
711709 - **How do I style the interactive states with inline styles ? **
712710 - See [Styling with inline styles ](#styling -with -inline -styles ), and also [this CodeSandbox ](https : // codesandbox.io/s/react-interactive-inline-style-example-6s8mn) for a live example.
713- - **How do I use React Interactive with Styled Components ? **
711+ - **How do I use Styled Components with React Interactive ? **
714712 - See [this CodeSandbox ](https : // codesandbox.io/s/react-interactive-styled-components-example-7dozj) for a live example.
715- - **How do I use React Interactive with Stitches ? **
713+ - **How do I use Stitches with React Interactive ? **
716714 - See [this CodeSandbox ](https : // codesandbox.io/s/react-interactive-stitches-example-os981) for a live example.
717715- **TypeScript **
718716 - **How do I use React Interactive with TypeScript ? **
0 commit comments