# reuse-ui

> A collection of reusable React components

Latest version **0.1.11** (published 2023-03-30) · 0 weekly downloads

## Install

```sh
npm install reuse-ui
pnpm add reuse-ui
yarn add reuse-ui
bun add reuse-ui
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.11 |
| Published | 2023-03-30 |
| First published | 2023-03-16 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 71.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | michaelladouceur |

## Links

- npm: https://www.npmjs.com/package/reuse-ui
- Repository: https://github.com/michaelladouceur1/reuse-ui
- Homepage: https://github.com/michaelladouceur1/reuse-ui#readme
- Issues: https://github.com/michaelladouceur1/reuse-ui/issues
- npm.io page: https://npm.io/package/reuse-ui

## Dependencies (5)

- [@types/jest](https://npm.io/package/@types/jest.md) ^29.5.0
- [@types/node](https://npm.io/package/@types/node.md) ^16.7.13
- [@types/react](https://npm.io/package/@types/react.md) ^18.0.0
- [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^18.0.0

## Recent versions

- 0.1.11 (latest) — 2023-03-30
- 0.1.10 — 2023-03-30
- 0.1.9 — 2023-03-28
- 0.1.8 — 2023-03-28
- 0.1.7 — 2023-03-28
- 0.1.6 — 2023-03-23
- 0.1.5 — 2023-03-23
- 0.1.4 — 2023-03-23
- 0.1.3 — 2023-03-23
- 0.1.2 — 2023-03-23
- 0.1.1 — 2023-03-23
- 0.1.0 — 2023-03-16

## README

# Reuse UI

A collection of reusable React components

## Index

- [Selection Area](#selection-area)

## Installation

Install Reuse UI from npm

Using npm:

```sh
npm install reuse-ui
```

Using yarn:

```sh
yarn add reuse-ui
```

## Usage

### [**Selection Area**](./src/lib/components/SelectionArea.tsx "SelectionArea.tsx")

The `<SelectionArea />` component is a component for displaying selectable list items. The list items can be an array of the following types:

- `string`
- `number`
- `{name: string, value: any}`

### **Example #1**

```js
import { useState } from "react";

function App() {
	const selections = ["Michael", "Ashley", "Christopher", "Jessica"];
	const [selected, setSelected] = useState(selections[0]);
	return <SelectionArea selections={SELECTIONS} selected={selected} setSelected={setSelected} />;
}
```

### **Example #2**

```js
import { useEffect, useState } from "react";

const URL = "https://jsonplaceholder.typicode.com/users";

function App() {
	const [selections, setSelections] = useState([]);
	const [selected, setSelected] = useState("");

	useEffect(() => {
		fetch(URL)
			.then((res) => res.json())
			.then((data) => {
				const users = data.map((user) => ({
					name: user.name,
					value: { id: user.id, name: user.name, email: user.email },
				}));
				setSelections(users);
				setSelected(users[0]);
			});
	}, []);

	const updateSelected = async (newSelected) => {
		fetch(URL, {
			method: "POST",
			headers: {
				"Content-Type": "application/json",
			},
			body: JSON.stringify({ user: newSelected.value }),
			mode: "cors",
		});

		setSelected(newSelected);
	};

	return <SelectionArea selections={selections} selected={selected} setSelected={updateSelected} />;
}
```

### **Selection Area Arguments**

| Argument      | Description                                                                                |
| ------------- | ------------------------------------------------------------------------------------------ |
| `selections`  | Array of list items to display (`string[]`, `number[]`, or `{name: string, value: any}[]`) |
| `selected`    | Selected value                                                                             |
| `setSelected` | Function for setting value of selected and performing other actions                        |
| `dimension`   | Object to set `width` and `height` of Selection Area (`{width: string, height: string}`)   |
| `id`          | Set ID of Selection Area                                                                   |
| `className`   | Set classes of Selection Area                                                              |
| `style`       | CSS style to apply to Selection Area                                                       |

---
_Source: https://npm.io/package/reuse-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._