react-attention - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

package.json

		{
		"name": "react-attention",
		"version": "1.0.5",
		"version": "1.0.6",
		"description": "Claim attention in React components",
		@@ -5,0 +5,0 @@ "main": "dist/index.client.js",

README.md

		# react-attention

		...
		> This package powers [RONIN](https://ronin.co) – check it out if you'd like to see it in action!

		Web apps tend to be made up of several different UI pieces that could potentially claim the user's attention, such as confirmation prompts, dialogs, alerts, or similar.

		Oftentimes, apps choose to let people interact with multiple of such components in different places in the UI, which means that multiple "flows" of interaction can be started at the same time.

		To avoid confusion resulting from that and to ensure there's always only one UI component claiming attention, you can add this tiny package.

		## Setup
		@@ -13,5 +19,5 @@

		Next, add the context provider in the root layout of your app:
		Next, add a context provider at the root of your app:

		```javascript
		```tsx
		import { AttentionProvider } from 'react-attention';
		@@ -28,4 +34,3 @@

		```javascript
		import { useState } from 'react';
		```tsx
		import { useAttention } from 'react-attention';
		@@ -38,7 +43,3 @@

		return (
		<div className={visible ? undefined : 'hidden'}>
		I am an overlay
		</div>
		);
		return <div className={visible ? undefined : 'hidden'} />
		};
		@@ -49,6 +50,14 @@ ```

		...
		If you would like the current component to be reset when the user clicks outside of it, `react-attention` can handle that automatically for you.

		Just pass a third argument containing a reference to the element:

		```tsx
		const element = useRef(null);

		useAttention(visible, () => setVisible(false), element);
		```

		## Author

		Created by [Leo Lamprecht (@leo)](https://leo.im)
		Created by [Leo Lamprecht (@leo)](https://leo.im)

react-attention - npm Package Compare versions

Improved metrics