# react-route-locker

> Ultimate React Route Authorization Library

Latest version **1.1.0** (published 2022-12-28) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-route-locker
pnpm add react-route-locker
yarn add react-route-locker
bun add react-route-locker
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-12-28 |
| First published | 2022-12-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14 |
| Dependencies | 0 |
| Unpacked size | 197.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | @TeamSM/MeetBhingradiya |
| Maintainers | meetbhingradiya |
| Keywords | react-route-locker, React, react-router, route-locker, Public Router, Private Router, React Router Dom, React Private Routes, React Public Routes, React Role Redirects Routes, React Component Library, React Authorization Library, Route Authentication Library, React Route Authorization Library |

## Links

- npm: https://www.npmjs.com/package/react-route-locker
- Repository: https://github.com/MeetBhingradiya/RouteLocker
- Homepage: https://github.com/MeetBhingradiya/RouteLocker#readme
- Issues: https://github.com/MeetBhingradiya/RouteLocker/issues
- npm.io page: https://npm.io/package/react-route-locker

## 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.1.0 (latest) — 2022-12-28
- 1.0.2 — 2022-12-14

## README

# <img src="https://img.icons8.com/external-others-inmotus-design/40/null/external-Route-geo-others-inmotus-design.png"/> Route Locker

-   Ultimate React Route Authriozation System

### Installation

Yarn Package Manager (Recommended)

```Bash
yarn add react-route-locker
```

NPM Package Manager

```Bash
npm intall react-route-locker
```

### Features

-   7 Modes.
-   5 Core Modes and 2 Universal Modes.
-   Role Based Public Routes and Role Redirect System.
-   Unlimited Roles Support.
-   Block Unauthorised Browsers. (Trusted and Recommendations Browsers : 8)
-   `react-router-dom` V6 Support.

### Coming Soon !

-   Unlimited Custom Variable Support.
-   Cutom Component Support in `react-router-dom` V6.
-   Debug Mode For Developers...
-   Auto Apply React Error Boundaries.
-   `react-router-dom` V5 Support.
-   init() Function to less object code.

### Usage

#### V6 React Router Dom

```JS
import { RouteLocker } from "react-route-locker";

<Route element={<RouteLocker Properties={[PublicRouter]} />}>
  <Route path={`path`} element={<Component />} />
</Route>
```

##### OR [Coming Soon !]

```JS
import { RouteLocker } from "react-route-locker";

<RouteLocker Properties={[PublicRouter]} path={`path`} element={<Component />} />
```

V5 React Router Dom [Coming Soon !]

```JS
import { RouteLocker } from "react-route-locker";

<RouteLocker Properties={[PublicRouter]} component={<Login />} path="*" />
```

### Versions

-   **Public Latest Version** : `1.0.0`

-   **Private Latest Version** : `1.0.0`
    > Note : Private Versions are been promoted to Public Versions after testing and fixing bugs.
-   **Dev Latest Version** : `1.0.0`
    > Note : Dev Versions is only for live testing version it may be contain bugs and errors.
    <p align="center">

| <img src="https://img.icons8.com/fluency/48/null/source-code.png"/> | Public                                                              | Private                                                             | Dev                                                               |
| ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | ----------------------------------------------------------------- |
| V1                                                                  | <img src="https://img.icons8.com/fluency/40/null/checkmark.png"/>   | <img src="https://img.icons8.com/fluency/40/null/checkmark.png"/>   | <img src="https://img.icons8.com/fluency/40/null/checkmark.png"/> |
| V2                                                                  | <img src="https://img.icons8.com/fluency/40/null/delete-sign.png"/> | <img src="https://img.icons8.com/fluency/40/null/delete-sign.png"/> | <img src="https://img.icons8.com/fluency/40/null/checkmark.png"/> |

</p>

<!-- JavaScript <img src="https://img.icons8.com/fluency/48/null/javascript.png"/> -->
<!-- TypeScript <img src="https://img.icons8.com/fluency/48/null/typescript--v2.png"/> -->
<!-- Source Code <img src="https://img.icons8.com/fluency/48/null/source-code.png"/> -->

<!-- Beta <img src="https://img.icons8.com/fluency/40/null/circular-arrows.png"/> -->
<!-- Avilable <img src="https://img.icons8.com/fluency/40/null/checkmark.png"/> -->
<!-- Not Avilable <img src="https://img.icons8.com/fluency/40/null/delete-sign.png"/> -->

### <img src="https://img.icons8.com/fluency/35/null/source-code.png"/> Snippets

#### <img src="https://img.icons8.com/fluency/25/null/globe.png"/> PublicRouter

```JS
const PublicRouter = {
  User_State: {
    Auth: Auth,
    Role: Role,
  },
  mode: "onlyAuth",
  Redirect: {
    mode: "RoleRedirect",
    useRoleRedirect: {
      Links: ["/admin/Dashboard", "/user/home", "/snippet/home", `/vip/home`],
      Roles: ["admin", "user", "dev", "vip"],
    },
  },
  useAuth: {
    enable: true,
    AntiAuth: true,
  },
};
```

#### <img src="https://img.icons8.com/ios-filled/25/null/keyhole-shield.png"/> PrivateRouter

```JS
const UserRouter = {
  User_State: {
    Auth: Auth,
    Role: Role,
  },
  mode: "useBoth",
  Redirect: {
    mode: "Normal",
    Link: `/auth/login`,
  },
  useBoth: ["onlyAuth", "onlyRole"],
  useAuth: {
    enable: true,
  },
  useRole: {
    enable: true,
    Expect_Role: "user",
  },
};
```

> ### About

-   Made By Meet Bhingradiya
-   License : `MIT`
-   Version : `2.1`

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