npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@sswahn/router

v1.2.2

Published

A lightweight and flexible routing solution. Router simplifies the process of implementing client-side routing in React applications, making it easier to manage different views and navigate between them while maintaining a component-based approach.

Downloads

12

Readme

Router · License npm version Weekly Downloads GitHub stars

A lightweight and flexible routing solution. Router simplifies the process of implementing client-side routing in React applications, making it easier to manage different views and navigate between them while maintaining a component-based approach.

Features

  • Component-Based Routing: The library is designed to work with React's component-based architecture, allowing you to define routes using individual components.
  • "Not Found" Handling: The library provides a built-in mechanism to handle "Not Found" scenarios when no matching route is found. This is typically achieved by using a component without a path prop.
  • Programmatic Navigation: It supports programmatic navigation through a navigateTo function, enabling you to navigate to specific routes in your application.
  • Dynamic Component Resolution: Use function-based components to dynamically resolve which component to render based on conditions specific to each route.
  • Asynchronous Loading: The library supports lazy loading of components through React's Suspense mechanism, allowing for a smoother user experience.
  • Dynamic Parameters: Define dynamic parameters in your route paths to intelligently match and capture values for these parameters.
  • Simple and Efficient: The routing logic is implemented with simplicity and efficiency in mind, allowing for a clean and straightforward routing solution.
  • Customization: The library is flexible and can be customized to fit the specific needs of your application.

Installation

npm install @sswahn/router

Usage

Import the router component.

import { Router, Route } from '@sswahn/router'

Routing

Define your routes' paths and their associated components.

import Home from './components/Home'
import About from './components/About'
import Contact from './components/Contact'
import NotFound from './components/NotFound'

<Router>
  <Route path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
  <Route component={NotFound}
</Router>

Lazy Loading

To lazy load a component provide a lazyFallback component.

<Router lazyFallback={CustomLoadingSpinner}>
  <Route path="/" component={Home} />
  ...
</Router>

Dynamic Parameters

The Route component supports dynamic parameters in route paths.

<Route path="/profile/{username}" component={UserProfile} />

Programmatic Navigation

Navigate to a route's path with navigateTo.

import { navigateTo } from '@sswahn/router'
...
const handleOnClick = event => {
  navigateTo('/about')
}

Dynamic Component Resolution

Use a function to return a component.

<Route path="/dashboard" component={() => {
  if (userIsAuthenticated) {
    return <AuthenticatedDashboard />
  } else {
    return <PublicDashboard />
  }
}} />

Peer Dependencies

Router requires React as a peer dependency. You should have React installed in your project with a version compatible with this library.

License

Router is MIT Licensed