···

       
1
       
-
       
<div align="center">

     

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

     

       
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
       
-
       
  <br />

     

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

     

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

     

       
7
       
-
       
  </a>

     

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

     

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

     

       
10
       
-
       
  </a>

     

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

     

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

     

       
13
       
-
       
  </a>

     

       
14
       
-
       
  <br />

     

       
15
       
-
       
  <br />

     

       
16
       
-
       
</div>

     

       
17
       
 
       


     

       
0
       
 
       

     

       
18
       
 
       


     

       
19
       
-
       
## Maintenance Status

     

       
20
       
 
       


     

       
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!

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

···

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

     

       
2
       
+
       
<br>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
3
       
 
       


     

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

     

       
5
       
 
       


     

       
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.

     

       
7
       
 
       


     

       
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
       
+
       
<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
       
+
       
<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
       
+
       
<br><br><br>

     

       
12
       
+
       


     

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