Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-router-pundit with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-pundit/package.json"); // react-pundit is a peer dependency. require("react-router-dom/package.json"); // react-router-dom is a peer dependency. var reactRouterPundit = require("react-router-pundit")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-router-pundit v2.0.0

React component that works with react-pundit and react-router-dom.

react-router-pundit

build status Downloads Downloads npm version dependencies dev dependencies License

React component that works with react-pundit and react-router-dom.

With inspiration from React Pundit.

Pre-requisites

You need react-pundit and react-router-dom (React Router V4).

Getting Started

Install it via npm:

npm install --save react-pundit react-router-pundit react-router-dom

PunditRoute

PunditRoute will pass the original location to the Redirect via the location state as a from. this.props.location.state.from

PunditRoute can handle redirect paths as the return from the pundit check as well as the default boolean return.

Example

import { PunditContainer } from 'react-pundit';
import { PunditRoute, PassPropsRoute } from 'react-router-pundit';
import { Route } from 'react-router-dom';

import ReceiptView from '../ReceiptView';
import TacoView from '../TacoView';
import BasicView from '../BasicView';

import policies from './policies.js';
import './App.css';

class App extends Component {
  render() {
    const user = { id: 1, role: 'basic', activated: true };
    const receipt = { user: { id: 1 }, id: 45389, body: 'test', title: 'Receipt for 1/1/2017.' };

    return (
      <div className="App">
        <PunditContainer policies={policies} user={userOne}>
          <PunditRoute
            path={`/receipt/${receipt.id}`}
            exact
            component={ReceiptView}
            type="Receipt"
            action="View"
            model={receipt}
            user={user}
            redirectPath="/login"
            componentProps={{ receipt }}
          />
          <PassPropsRoute
            path="/tocos"
            exact
            componentProps={{ magic: true }}
            component={TacoView}
          />
          <Route path="/basic" component={BasicView} />
        </PunditContainer>
      </div>
    );
  }
}

API reference

// Available components
import {
  PunditRoute,
  PassPropsRoute
} from 'react-router-pundit';

Work in progress

Examples

See examples folder.

Testing changes locally

You can test changes by importing the library directly from a folder:

  1. Do changes to the library
  2. On your test project: npm install /path/to/your/react-router-pundit/ --save
  3. For easy development, you can npm link react-router-pundit on your application
  4. And finally npm run compile the react-router-pundit to have the changes in your application

License

MIT

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free