Giter Club home page Giter Club logo

pojo-router's Introduction

pojo-router

npm downloads bundle size npm version PRs Welcome

A hook based machanism to convert a string (i.e. a path) into metadata.

API

Define your metadata in a provider component.

import React from 'react';
import PojoRouter from 'pojo-router';

const namedPaths = {
  page1: '/page1',
  page2: { path: '/page2', sensitive: true },
  page3: { path: '/page3/:id' },
};

const routes = [
  ['page1', { abc: 123 }],
  ['page2', { abc: 456 }],
  ['page3', { abc: 789 }],
  ['/page4', { abc: 0 }]
];

const notFound = { nothing: true };

const Router = ({ children }) => (
  <PojoRouter namedPaths={namedPaths} routes={routes} notFound={notFound}>
    { children }
  </PojoRouter>
);

Within your child component, use one of the hooks.

useCurrentPath

Sets or gets the "current path". This sets will use this path for all calls to useCurrentMatch until a new path is set.

If a path is provided, it sets that path.

It always returns the current path.

useMatches

Given a path, this returns all the metadata for routes that match.

useFirstMatch

Given a path, this returns the metadata for the first route that matches.

useBestMatch

Given a path and a compareFunction (see Array.prototype.sort), this returns the metadata for the best route that matches based on the provided compare function.

useCurrentMatch

When a path is set via useCurrentPath, this returns the first match metadata for the current path that is set.

useOutboundRoute

Given a named route (or route string if none is defined), this returns a function that will generate a matching string, including populating the dynamic variables. E.g. for a route like /entity/:id an outbound routing function like entityPath({ id: 123 }) will generate /entity/123.

pojo-router's People

Contributors

cbwk avatar dependabot[bot] avatar mprobber avatar notwillk avatar ntucker avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.