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

@alexseitsinger/react-router-components

v4.0.0

Published

Components that should be used with react router.

Downloads

41

Readme

createConnected

Wrapper for creating components using connect and target state.

Parameters

  • props object
    • props.connect function The connect method to use
    • props.path string The target state to connect to.

Examples

// routes.js
import { createConnected } from "@alexseitsinger/react-router-components"

import { HomePage } from "pages/home"
import { LandingPage} from "pages/landing"
import { AboutPage } from "pages/about"

const connected = createConnected({
  connect,
  path: "authentication.isAuthenticated",
})

export const config = {
  path: "/",
  Component: connected.toggled({
    anonymous: LandingPage,
    authenticated: HomePage,
  }),
  routes: [
    {
      path: "about",
      Component: connected.redirected({
        component: AboutPage,
      }),
    },
  ]
}

Returns object A set of methods that use the connect and target state passed.

createModalSwitch

Creates a stateless functional component for use in the root route. Routes that are marked with modal: true are rendered WITH their parent route component.

Parameters

  • options object An object of route configurations.
    • options.Switch object The Switch component to use
    • options.Route function The Route component to use for each route.
    • options.config object The routes config object to generate routes from.
    • options.report (function | boolean) The function or boolean to toggle route reports. (optional, default false)

Examples

import React from "react"
import { Router, Route, Switch } from "react-router"
import { createModalSwitch }  from "@alexseitsinger/react-router-components"

import LandingPage from "./pages/landing"
import AboutPage from "./pages/about"
import AboutModalPage from "./pages/about-modal"
import NotFoundPage from "./pages/not-found"

const config = {
  path: "/",
  Component: LandingPage,
  routes: [
    {path: "*", Component: NotFoundPage},
    {path: "about", Component: AboutPage, routes: [
      {path: "modal", Component: AboutModalPage, modal: true},
    ]}
  ]
}

function App(props) {
  const ModalSwitch = createModalSwitch({ Switch, Route, config })
  return (
    <Router>
      <Layout>
        <Route component={ModalSwitch} />
      </Layout>
    </Router>
  )
}

export default App

Returns function A stateless functional component to be used as the root route.

createRedirectedComponent

Returns a connected component that redirects if the state isnt truthy.

Parameters

  • config object
    • config.connect function The connect function to use for connecting to redux.
    • config.path string The path to the reducer state key we want to check for truthiness.
    • config.component object The component to render if the state is truthy.
    • config.url string The pathname to redirect to if state isn't truthy. (optional, default "/")

Examples

import React from "react"
import { Provider, connect } from "react-redux"
import { Router, Route } from "react-router"
import { createRedirectedComponent } from "@alexseitsinger/react-router-components"

import SettingsPage from "pages/settings"
import LandingPage from "pages/landing"

const RedirectedSettingsPage = createRedirectedComponent({
  connect,
  component: SettingsPage,
  path: "authentication.isAuthenticated",
  url: "/",
})

function App(props) {
  return (
    <Provider store={store}>
      <Router>
        <Route path={"/"} component={LandingPage} exact />
        <Route path={"/settings"} component={RedirectedSettingsPage} exact />
      </Router>
    </Provider>
  )
}

export default App

Returns function A connected component that has some state mapped.

createToggledComponent

Returns a connected component that renders another component based on the state.

Parameters

  • config object
    • config.connect function The connect function to use for connecting to redux.
    • config.path string The path to the reducer state key we want to check for truthiness.
    • config.components object
      • config.components.authenticated function The component to render when the state is truthy.
      • config.components.anonymous function The component to render when the state is not truthy.
    • config.components.anonymous
    • config.components.authenticated

Examples

import React from "react"
import { Provider, connect } from "react-redux"
import { Router, Route } from "react-router"
import { createToggledComponent } from "@alexseitsinger/react-router-components"

import HomePage from "./pages/home"
import LandingPage from "./pages/landing"

const ToggledIndex = createToggledComponent({
  connect,
  path: "authentication.isAuthenticated",
  components: {
     authenticated: HomePage,
     anonymous: LandingPage,
  },
})

function App(props) {
  return (
    <Provider store={store}>
      <Router>
        <Route path={"/"} component={ToggledIndex} exact />
      </Router>
    </Provider>
  )
}

export default App

Returns function A connected component that has some state mapped for toggling.

ModalSwitch

A route that can be used for other routes.

Parameters

  • $0 Object
    • $0.Switch
    • $0.Route
    • $0.config
    • $0.report (optional, default false)
  • props object
    • props.Switch function The Switch component to use.
    • props.Route function The Route component to use.
  • config object The config to generate routes from.
  • report (function | bool) The function or boolean to enable reporting of route paths.

Examples

// routes.js
import { IndexPage } from "pages/index"
import { AboutPage } from "pages/about"

export const config = {
  path: "/",
  Component: IndexPage,
  routes: [
    {path: "about", Component: AboutPage},
  ]
}

// app.js
import React from "react"
import { Router, Route, Switch } from "react-router"
import { ModalSwitch } from "@alexseitsinger/react-router-components"

import { config } from "./routes"

function App() {
 return (
   <Router>
     <ModalSwitch
       Switch={Switch}
       Route={Route}
       config={config}
       report={true}
     />
   </Router>
 )
}