imdimasan/client-helpers-react

Package contains common client side helpers for React.

Pack of common helpers for React

How to use Modal Context

Code example

How to use Route service typings

src/typings/lomray/route.d.ts (Add new file in project)

import type { IParams } from '@lomray/client-helpers-react/services/route';
import type ROUTE from '@constants/routes';

declare module '@lomray/client-helpers-react/services/route' {
  type TRoute = typeof ROUTE;

  export type TRouteKeys = keyof TRoute;

  export type TRouteParams<TKey extends TRouteKeys> = IParams<{
    [TK in TKey]: TRoute[TK];
  }>;
}

src/constants/routes.ts

enum TEST_TAB {
  FOO = 'foo',
  BAR = 'bar',
}

const ROUTE = {
  TEST: {
    URL: '/test/:id/:tabName',
    PARAMS: { id: '', tabName: TEST_TAB },
  },
}

src/pages/test/index.tsx

import type { TRouteParams } from '@lomray/client-helpers-react/services/route';
import { useParams } from 'react-router-dom';

const Test: FC = () => {
  // id: string | undefined, tabName: TEST_TAB | undefined
  const { id, tabName } = useParams<TRouteParams<'TEST'>>();

  ...
}