Nybble Processing Mainframe
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@alexseitsinger/react-router-components

4.0.0 • Public • Published

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>
 )
}

Install

npm i @alexseitsinger/react-router-components

DownloadsWeekly Downloads

8

Version

4.0.0

License

BSD-2-Clause

Unpacked Size

196 kB

Total Files

7

Last publish

Collaborators

  • avatar