react-access-route

A React hook for managing access control in your application. This package provides a simple way to manage user permissions and access control in React applications using a context provider.

Installation

To install the package, run the following command:

npm install react-access-route

or

yarn add react-access-route

Features

• Role-based access control: Define roles and permissions for users.
• Context provider: Wrap your application with the AccessProvider to provide access control context.
• Custom hooks: Use the useAccess hook to check permissions in your components.
• Guard components: Use the Guard component to conditionally render content based on user permissions.
• TypeScript support: Fully typed with TypeScript for better development experience.

Usage

1. Wrap your application with the AccessProvider:

import React from "react";
import { AccessProvider } from "react-access-route";

const App = () => {
  return (
    <AccessProvider roles={["admin"]} permissions={[["edit", "article"]]}>
      <YourComponent />
    </AccessProvider>
  );
};

2. Use the useAccess hook in your components:

import React from "react";
import { useAccess } from "react-access-route";

const YourComponent = () => {
  const { hasAccess } = useAccess();

  return (
    <div>
      {hasAccess("edit", "article") ? (
        <button>Edit Article</button>
      ) : (
        <p>You do not have permission to edit this article.</p>
      )}
    </div>
  );
};

export default YourComponent;

API

AccessProvider

• props:
  • roles: An array of roles assigned to the user.
  • permissions: An array of permissions assigned to the user, where each permission is an array containing the action and the resource (e.g., ['edit', 'article']).

useAccess

• returns: An object with the following properties:
  • hasAccess(action: string, resource: string): A function that checks if the user has the specified action on the resource. Returns true if access is granted, otherwise false.

Example

import React from "react";
import { AccessProvider, useAccess } from "react-access-route";
const App = () => {
  return (
    <AccessProvider
      roles={["admin"]}
      permissions={[
        ["edit", "article"],
        ["view", "dashboard"],
      ]}
    >
      <Dashboard />
    </AccessProvider>
  );
};
const Dashboard = () => {
  const { hasAccess } = useAccess();

  return (
    <div>
      {hasAccess("view", "dashboard") ? (
        <h1>Dashboard</h1>
      ) : (
        <p>You do not have permission to view this dashboard.</p>
      )}
      {hasAccess("edit", "article") && <button>Edit Article</button>}
    </div>
  );
};

export default App;

Testing

To run tests, use the following command:

npm test

Development

To build the project, run:

npm run build

This will compile the TypeScript files and create a dist directory with the built files.

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue if you find a bug or have a feature request.

Changelog

• v1.0.0: Initial release with basic access control functionality.

Authors

• MOM Sombrathna - Initial work and development.

Acknowledgements

• Thanks to the React community for their support and contributions.

Troubleshooting

If you encounter any issues, please check the following:

• Ensure that you have the correct version of React installed.
• Make sure to wrap your application with the AccessProvider before using the useAccess hook.
• If you have any questions or need help, feel free to open an issue on GitHub.