@alexseitsinger/react-toggled-component
v1.0.0
Published
Returns a connected component that renders another component based on the state
Downloads
11
Maintainers
Readme
Table of Contents
createToggledComponent
Returns a connected component that renders another component based on the state.
Parameters
$0
Object$0.components.Anonymous
$0.components.Authenticated
$0.state
$0.connect
components
Object The Anonymous and Authenticated components to use for rendering.state
Object The path to the reducer state key we want to check for truthiness.connect
Function The connect function to use for connecting to redux.
Examples
import React from "react"
import { Provider, connect } from "react-redux"
import { Router, Route } from "react-router"
import { createToggledComponent } from "@alexseitsinger/react-toggled-component"
import HomePage from "./pages/home"
import LandingPage from "./pages/landing"
const ToggledIndex = createToggledComponent({
connect,
state: "core.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.