···

       
1
       
1
       
-
       
<div align="center">

     

       
2
       
2
       
-
       
  <h2 align="center">use-interactions</h2>

     

       
3
       
3
       
-
       
  <p align="center"><strong>A collection of React hooks for interactions with a single goal: Making it easier to add accessible and expected web interactions.</strong></p>

     

       
4
       
4
       
-
       
  <br />

     

       
5
       
5
       
-
       
  <a href="https://npmjs.com/package/use-interactions">

     

       
6
       
6
       
-
       
    <img alt="NPM Version" src="https://img.shields.io/npm/v/use-interactions.svg" />

     

       
7
       
7
       
-
       
  </a>

     

       
8
       
8
       
-
       
  <a href="https://npmjs.com/package/use-interactions">

     

       
9
       
9
       
-
       
    <img alt="License" src="https://img.shields.io/npm/l/use-interactions.svg" />

     

       
10
       
10
       
-
       
  </a>

     

       
11
       
11
       
-
       
  <a href="https://bundlephobia.com/result?p=use-interactions">

     

       
12
       
12
       
-
       
    <img alt="Minified gzip size" src="https://img.shields.io/bundlephobia/minzip/use-interactions.svg?label=gzip%20size" />

     

       
13
       
13
       
-
       
  </a>

     

       
14
       
14
       
-
       
  <br />

     

       
15
       
15
       
-
       
  <br />

     

       
16
       
16
       
-
       
</div>

     

       
1
       
1
       
+
       
<img width="890" alt="useInteractions" src="https://user-images.githubusercontent.com/2041385/175799707-a9187ab1-97d3-45b1-b594-10c62253d4da.svg">

     

       
2
       
2
       
+
       
<br>

     

       
17
       
3
       
 
       


     

       
4
       
4
       
+
       
React hooks for accessible, common web interactions. **UI super powers without the UI.**

     

       
18
       
5
       
 
       


     

       
19
       
19
       
-
       
## Maintenance Status

     

       
6
       
6
       
+
       
`use-interactions` is an experimental and incomplete collection of utility hooks to selectively provide accessible behaviours, animations, and other tricky interactions that would otherwise slow you down when building an accessible application. All UI and styling is up to you and ARIA authoring is only based on advice.

     

       
20
       
7
       
 
       


     

       
21
       
21
       
-
       
**Experimental:** This project is quite new. We're not sure what our ongoing maintenance plan for this project will be. Bug reports, feature requests and pull requests are welcome. If you like this project, let us know!

     

       
8
       
8
       
+
       
<a href="https://npmjs.com/package/use-interactions"><img alt="NPM Version" src="https://img.shields.io/npm/v/use-interactions.svg?style=flat-square" /></a>

     

       
9
       
9
       
+
       
<a href="https://npmjs.com/package/use-interactions"><img alt="License" src="https://img.shields.io/npm/l/use-interactions.svg?style=flat-square" /></a>

     

       
10
       
10
       
+
       
<a href="https://bundlephobia.com/result?p=use-interactions"><img alt="Minified gzip size" src="https://img.shields.io/bundlephobia/minzip/use-interactions.svg?label=gzip%20size&style=flat-square" /></a>

     

       
11
       
11
       
+
       
<br><br><br>

     

       
12
       
12
       
+
       


     

       
13
       
13
       
+
       
**Website with Patterns coming soon.**