npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-resource-router

v0.29.1

Published

Configuration driven routing solution for React that manages SPA route matching, data fetching and progressive rendering

Downloads

6,315

Readme

React Resource Router (RRR) is a configuration driven routing solution for React that manages single page application route matching, data fetching and progressive rendering.

Why?

React Resource Router was developed by Atlassian for Jira primarily to improve performance and prepare for compatibility with React's forthcoming Concurrent Mode on both client and server. You can read more about its development and impact here.

Features

  • Fully driven by a static configuration of route objects
  • Each route object contains the following core properties
    • path - the path to match
    • component - the component to render
    • resources - an array of objects containing fetch functions that request the route component's data
  • Data for a route is requested asynchronously and as early as possible, with the page progressively rendering as the requests resolve. This results in quicker meaningful render times
  • Works on both client and server without having to traverse the React tree

Usage

Create your resources

Resources describe and provide the data required for your route. This data is safely stored and accessed via the useResource hook or ResourceSubscriber component.

import { createResource } from 'react-resource-router/resources';
import { fetch } from '../common/utils';

export const homeResource = createResource({
  type: 'HOME',
  getKey: () => 'home-resource-key',
  getData: () => fetch('https://my-api.com/home'),
});

export const aboutResource = createResource({
  type: 'ABOUT',
  getKey: () => 'about-resource-key',
  getData: () => fetch('https://my-api.com/about'),
});

Create your components

These are the React components that get rendered for your routes. As mentioned, they can be wired into the state of your resources via the useResource hook or ResourceSubscriber component.

import { useResource } from 'react-resource-router/resources';
import { aboutResource, homeResource } from '../routes/resources';
import { Loading, Error } from './common';

export const Home = () => {
  const { data, loading, error } = useResource(homeResource);

  if (error) {
    return <Error error={error} />;
  }

  if (loading) {
    return <Loading />;
  }

  return <div>{data.home.content}</div>;
};

export const About = () => {
  const { data, loading, error } = useResource(aboutResource);

  if (error) {
    return <Error error={error} />;
  }

  if (loading) {
    return <Loading />;
  }

  return <div>{data.about.content}</div>;
};

Create your routes

Your route configuration is the single source of truth for your application's routing concerns.

import { Home, About } from '../components';
import { homeResource, aboutResource } from './resources';

export const appRoutes = [
  {
    name: 'home',
    path: '/',
    exact: true,
    component: Home,
    resources: [homeResource],
  },
  {
    name: 'about',
    path: '/about',
    exact: true,
    component: About,
    resources: [aboutResource],
  },
];

Use the Router

Now that you've set up your resources, components and configuration correctly, all you need to do is mount the Router in your react tree with a RouteComponent as a child. It will do the rest!

import {
  Router,
  RouteComponent,
  createBrowserHistory,
} from 'react-resource-router';
import { createResourcesPlugin } from 'react-resource-router/resources';
import { appRoutes } from './routing/routes';

const history = createBrowserHistory();
const resourcesPlugin = createResourcesPlugin({});

const App = () => (
  <Router routes={appRoutes} history={history} plugins={[resourcesPlugin]}>
    <RouteComponent />
  </Router>
);

Installation

npm install react-resource-router

# or

yarn add react-resource-router

Documentation

Check the docs website or the docs folder.

Examples

You can checkout the repo and play around with the examples we have setup to demonstrate how the API can be used for various use cases.

  1. Clone the repo and install dependencies
  2. Run npm start
  3. Local dev site will launch with all the examples

Thanks

Big thanks to Thinkmill for their involvement in this project.

License

Copyright (c) 2020 Atlassian and others. Apache 2.0 licensed, see LICENSE file.

With ❤️ from Atlassian