https://github.com/fabiulous/routing

https://github.com/fabiulous/routing

Last synced: 16 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/fabiulous/routing
• Owner: fabiulous
• License: mit
• Created: 2023-10-10T08:58:06.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-03-27T14:29:18.000Z (10 months ago)
• Last Synced: 2024-12-09T14:58:08.450Z (about 2 months ago)
• Language: TypeScript
• Size: 98.6 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        



[![npm downloads](https://img.shields.io/npm/dt/@fabiulous/routing?style=for-the-badge)](https://www.npmjs.com/package/@fabiulous/routing)

[![GitHub](https://img.shields.io/github/license/fabiulous/routing?style=for-the-badge)](https://github.com/fabiulous/routing/blob/main/LICENSE)

![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/fabiulous/routing/node.js.yml?style=for-the-badge)



### Install

`npm install @fabiulous/routing`

or

`yarn add @fabiulous/routing`

### Config

```ts

export const routes = {

  home: '/',

  auth: {

    path: '/auth',

    routes: {

      login: '/login',

    },

  },

  users: {

    path: '/users',

    routes: {

      create: '/create',

      edit: (userId: string | number = ':userId') => `/edit/${userId}`,

      view: (userId: string | number = ':userId') => ({

        path: `/${userId}`,

        routes: {

          edit: '/details',

          nested: {

            path: '/nested',

            routes: {

              nested: '/nested',

              view: (nestedId: string | number = ':nestedId') => ({

                path: `/${nestedId}`,

                routes: {

                  edit: '/edit',

                },

              }),

            },

          },

        },

      }),

    },

  },

  products: {

    path: '/products',

    routes: {

      create: '/create',

      view: (productId: string | number = ':productId') => `/${productId}`,,

      edit: (productId: string | number = ':productId') => `/edit/${productId}`,

    },

  },

};

```

### Quickstart

```tsx

import React from 'react';

import { useLocation, useNavigate } from 'react-router';

import { generateRoutes, generateRouting, addQuery } from '@fabiulous/routing';

import { routes } from '@shared/routes';

// Generate Context and hooks dynamically to infer router type correctly

const {

  RoutingContext: _RoutingContext,

  useRouter: _useRouter,

  useQueryState: _useQueryState,

  useDebouncedQueryState: _useDebouncedQueryState,

} = generateRouting(() => {}, routes);

export const RoutingContext = _RoutingContext;

export const RoutingProvider: React.FC = ({ children }) => {

  const navigate = useNavigate();

  const location = useLocation();

  const go = React.useCallback((pathname: string, params?: Record>, replace: boolean = false) => {

    navigate({

      pathname,

      search: params && addQuery(window.location.search, params),

    }, {

      replace,

    });

  }, [navigate]);

  const router = React.useMemo(() => generateRoutes(go, routes), [go]);

  return (

    , replace?: boolean) => go(location.pathname, params, replace),

    }}>

      {children}

    

  );

};

export const RoutingConsumer = RoutingContext.Consumer;

export const useRouter = _useRouter;

export const useQueryState = _useQueryState;

export const useDebouncedQueryState = _useDebouncedQueryState;

```

### Usage

```ts

import { useRouter } from 'src/routing';

const router = useRouter();

router.users.edit(5).go();

router.users.view(4).nested.view(5).edit.go();

router.products.go({ page: 2, category: 5 });

router.products.view(7).go();

```

```ts

import { useQueryState, useDebouncedQueryState } from 'src/routing';

[param, setParam] = useQueryState('page', 1);

[currSearch, search, setSearch] = useDebouncedQueryState('search');

```