# use-access

> a react hook and component for managing access.

Latest version **1.0.0** (published 2023-06-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-access
pnpm add use-access
yarn add use-access
bun add use-access
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-06-22 |
| First published | 2023-06-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 20.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | catpotola |
| Maintainers | catpotola |
| Keywords | react, hook, javascript, typescript |

## Links

- npm: https://www.npmjs.com/package/use-access
- npm.io page: https://npm.io/package/use-access

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2023-06-22
- 0.0.2 — 2023-06-22

## README

# 🪝useAccess

a react hook with component managing access easily.

you can quickly combine it in your Nextjs or other projects.

## 📝 basic usage

import `useSubcribe` and `AccessProvider`

```jsx
// App.js
// example for use useSubcribe ，recommend using useSWR.
const fetcher = () =>
  fetch("http://localhost:3000/access").then((response) => response.json());
const access = useSubcribe(fetcher);

return (
  <AccessProvider value={access}>
    // provide the access here.
    <Home />
  </AccessProvider>
);
```

using `useAccess` to get the access.

```jsx
// Home.js
const access = useAccess(); // get access using hook.

return (
  <div>
    <Access accessiable={access.canRead}>
      {"show hello world if the accessiable is true."}
      <h1>Hello world! I have access.</h1>
    </Access>
    <Access accessiable={false} failcallback={<h1>I don't have Access</h1>}>
      {"if accessiable is falthy then render failcallback."}
      <h1>Hello world! I have access.</h1>
    </Access>
  </div>
);
```

## examples

install dependencies.

`yarn install`

use terminal run scripts following in different window.

```shell
yarn example-server
yarn example-web-useSubcribeExample
```

then open `http://localhost:1234` in broswer.

backend uses the `json-server` you can edit the `./examples/server/db.json` and rerun the `yarn example-server`.

## recommend access standard

```json
{
  "access": {
    "canReadPost": true,
    "canUpdatePost": true,
    "canDeletePost": true
  }
}
```

you can implement a selector in more complex project. and just a callbackFunction and parse the access got from fetcher. (ps: don't worry mutate the param access)

```js
const selector = (access) => access.posts;
const posts_access = useAccess(selector);
```

and you can define the access response structure like this:

```json
{
  "access": {
    "posts": {
      "canReadPost": true,
      "canUpdatePost": true,
      "canDeletePost": true
    },
    "otherResource": {
      "canRead": false
    }
  },
  "errMsg": null
}
```

## 🚧 plan in the future

- 🛠<span style="color: #008f8f;font-size:1.2em"> feat </span>: custom global access config.
- 🛠<span style="color: #008f8f;font-size:1.2em"> feat </span>: automated access template generate.
- 📚<span style="color: #558f55;font-size:1.2em"> docs </span>: examples with nextauth.
- 📚<span style="color: #558f55;font-size:1.2em"> docs </span>: combine with nextauth.

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