README

page-path

Page path builder

Installation:

npm install page-path

Usage

Define path interface

interface BookPath {
    name: string;
    page?: number;
}

Create page path

const bookPagePath = new PagePath<BookPath>('/book', {
    path: ['name'],
    query: ['page'],
});

Build path

const path = bookPagePath.build({ name: 'alphabet', page: 7 });
// path: "/book/alphabet?page=7"

constructor

    // PagePath class
    constructor(root: string, options: PagePathOptions);

Parameters: root - root path.

options: path's options. See PagePathOptions

build(params: any): string

Parameters: params - costom defined params values.

Returns built URL based on passed parameters.

PagePathOptions

PagePath class constructor receives string or PagePathOptions interface. string type represents root value.

Name	Required	Type	Description	Example
`path`	No	`string` or `Array<string>`	Subdirectories names	/book/alphabet?page=7
`query`	No	`string` or `Array<string>`	Queries names	/book/alphabet?page=7
`ending`	No	`string`	root path's ending. Use case example: `nextjs` static pages	/book.html

Using in `react-router-dom`

Define interface

export interface BookPath {
    name: string;
}

Define container

import { PagePath } from 'page-path';

export const AppPaths = {
    index: new PagePath('/'),
    contact: new PagePath('/contact'),
    book: new PagePath<BookPath>('/book/:name'),
};

Define routes

import { Switch, Route } from 'react-router-dom';
...
<Switch>
    <Route
        exact={true}
        path={AppPaths.index.routePath}
        component={IndexPage}
    />
    <Route
        exact={true}
        path={AppPaths.contact.routePath}
        component={ContactPage}
    />
    <Route
        exact={true}
        path={AppPaths.book.routePath}
        component={BookPage}
    />
    ...
</Switch>

Define achors

<a href={AppPaths.index.build()}>Home</a>
// => <a href="/">Home</a>
<a href={AppPaths.contact.build()}>Contact</a>
// => <a href="/contact">Contact</a>
<a href={AppPaths.book.build({ name: 'alphabet' })}>Alphabet</a>
// => <a href="/book/alphabet">Alphabet</a>

Using in `next` or `gatsby`