npm install react-navigator-web

React Navigator Web

Simple easy to use router for react.

Main features:

- Simple api
- Focus on nested routing
- Support for animating transitions
- Switch router (typical router, no transition and state is typically reset)
- Stack router (stack of routes, transitions supported and state is typically kept)
- Server side rendering supported

Note: the documentation is incomplete, the project isn't well tested and it's not ready for production.

Install

sh

npm install react-navigator-web



Or



yarn add react-navigator-web



Or



pnpm add react-navigator-web





Usage

jsx

import React, { useState } from 'react'

import ReactDOM from 'react-dom/client'

import './index.css'

import { ReactNavigator, useLocation, ReactNavigatorOptions, PageRoute, useRoute, useQueryState, useNavigator, useRenderProps } from 'react-navigator'

import { Link } from 'react-navigator/dist/components'



function AnyPage() {

    const { id } = useLocation().params



    return id: {id as string}

}





// All ways to use

Link

 component are equivalent

function Home() {

    return 

        

        

            Home

            

                About

            

            

                Dashboard (settings)

            

            

                Post 123



    

}



function Dashboard() {

    const location = useLocation()



    const route = useRoute()



    const [num] = useState(() => Math.floor(Math.random() * 100))



    // const showAll = location.query.showAll === '1'



    const [something, setSomething] = useQueryState('something', {

        // 'push' -> clicking on back button will set the previous value

        // 'replace' -> clicking on back button will go back to the previous page

        mode: 'push', 

        parse: (value) => value === '1',

        stringify: (value) => value ? '1' : null,

    })



    function toggleShowAll() {

        setSomething(!something)

    }



    // Other hooks

    // useNavigator()

    // useLocation()

    // useRoute()

    // useQueryState()

    // useRenderProps()



    const [error, setError] = useState(undefined)



    if (error) {

        throw error

    }



    return 

        

        

            Dashboard. Sub path: {location.childPath}. Random: {num}

            

            Something: {something ? 'yes' : 'no'}



    

}



const options: ReactNavigatorOptions = {

    // staticUrl: '/some/path', // only for server side rendering or using another history implementation (optional)

    defaultRouteBackground: '#f1f1f1', // default: darkMode ? '#121212' : 'white' (optional)

    defaultRouteTransitionDuration: 300, // default duration of routes animations/transitions (optional)

    darkMode: false, // will affect default background (optional) 

    defaultRouteAnimation: 'slide' // default animation of routes (optional)

}



// Animations: 'scale' | 'fade' | 'slide' | 'none' | 'delayed-exit' | 'default'

// default -> scale

// delayed-exit: shows instantly but it have a delay for exit animation (for animated modals)

// none: no animation at all 



// using

 at start or end of path is optional and will not have any effect (example: '/home/' equivalent to 'home')

const navigator = new ReactNavigator({

    '/': () => ,

    '/:id': () => ,

    '/about': () => About page

,

    'help': () => Help page,

    'help/:topic': () => About page,

    'dashboard/*': () => ,

}, options);





// Example components





function AppBar() {

    return 

        

            

                

                

                

            

            

        

    

}



function showMenu() {

    navigator.push(new PageRoute({

        opaque: false,

        transitionDuration: 100,

        animation: 'fade',

        popOnBack: true,

        removeOnPush: true,

        builder(props) {

            // console.log(props.location)

            return



        },

    }))

}



function Menu() {

    return 

         navigator.pop()}>

            

                

                                            onClick={e => e.stopPropagation()}

                    >

                        Home

                        About

                        Dashboard

                        Settings

                        123

                        567

                    

                

            

        

    

}



// Put the navigator in the react tree



ReactDOM.createRoot(document.getElementById('root')!).render(

    

        

            

        

    ,

);



/// Neccessary for showing this example



function Scaffold(props: { children: React.ReactNode }) {

    return 

        {props.children}

    

}



function Footer() {

    return 

        

            GitHub

        

    

}



function Center(props: { children: React.ReactNode }) {

    return 

        {props.children}

    

}

npm install react-navigator-web

React Navigator Web

Install

sh

npm install react-navigator-web



Or



yarn add react-navigator-web



Or



pnpm add react-navigator-web





Usage

jsx

import React, { useState } from 'react'

import ReactDOM from 'react-dom/client'

import './index.css'

import { ReactNavigator, useLocation, ReactNavigatorOptions, PageRoute, useRoute, useQueryState, useNavigator, useRenderProps } from 'react-navigator'

import { Link } from 'react-navigator/dist/components'



function AnyPage() {

    const { id } = useLocation().params



    return id: {id as string}

}





// All ways to use

Link

 component are equivalent

function Home() {

    return 

        

        

            Home

            

                About

            

            

                Dashboard (settings)

            

            

                Post 123



    

}



function Dashboard() {

    const location = useLocation()



    const route = useRoute()



    const [num] = useState(() => Math.floor(Math.random() * 100))



    // const showAll = location.query.showAll === '1'



    const [something, setSomething] = useQueryState('something', {

        // 'push' -> clicking on back button will set the previous value

        // 'replace' -> clicking on back button will go back to the previous page

        mode: 'push', 

        parse: (value) => value === '1',

        stringify: (value) => value ? '1' : null,

    })



    function toggleShowAll() {

        setSomething(!something)

    }



    // Other hooks

    // useNavigator()

    // useLocation()

    // useRoute()

    // useQueryState()

    // useRenderProps()



    const [error, setError] = useState(undefined)



    if (error) {

        throw error

    }



    return 

        

        

            Dashboard. Sub path: {location.childPath}. Random: {num}

            

            Something: {something ? 'yes' : 'no'}



    

}



const options: ReactNavigatorOptions = {

    // staticUrl: '/some/path', // only for server side rendering or using another history implementation (optional)

    defaultRouteBackground: '#f1f1f1', // default: darkMode ? '#121212' : 'white' (optional)

    defaultRouteTransitionDuration: 300, // default duration of routes animations/transitions (optional)

    darkMode: false, // will affect default background (optional) 

    defaultRouteAnimation: 'slide' // default animation of routes (optional)

}



// Animations: 'scale' | 'fade' | 'slide' | 'none' | 'delayed-exit' | 'default'

// default -> scale

// delayed-exit: shows instantly but it have a delay for exit animation (for animated modals)

// none: no animation at all 



// using

 at start or end of path is optional and will not have any effect (example: '/home/' equivalent to 'home')

const navigator = new ReactNavigator({

    '/': () => ,

    '/:id': () => ,

    '/about': () => About page

,

    'help': () => Help page,

    'help/:topic': () => About page,

    'dashboard/*': () => ,

}, options);





// Example components





function AppBar() {

    return 

        

            

                

                

                

            

            

        

    

}



function showMenu() {

    navigator.push(new PageRoute({

        opaque: false,

        transitionDuration: 100,

        animation: 'fade',

        popOnBack: true,

        removeOnPush: true,

        builder(props) {

            // console.log(props.location)

            return



        },

    }))

}



function Menu() {

    return 

         navigator.pop()}>

            

                

                                            onClick={e => e.stopPropagation()}

                    >

                        Home

                        About

                        Dashboard

                        Settings

                        123

                        567

                    

                

            

        

    

}



// Put the navigator in the react tree



ReactDOM.createRoot(document.getElementById('root')!).render(

    

        

            

        

    ,

);



/// Neccessary for showing this example



function Scaffold(props: { children: React.ReactNode }) {

    return 

        {props.children}

    

}



function Footer() {

    return 

        

            GitHub

        

    

}



function Center(props: { children: React.ReactNode }) {

    return 

        {props.children}

    

}