@alexseitsinger/react-router-components
v4.0.0
Published
Components that should be used with react router.
Downloads
26
Maintainers
Readme
createConnected
Wrapper for creating components using connect and target state.
Parameters
props
object
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.
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
objectconfig.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
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, defaultfalse
)
props
objectconfig
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>
)
}