@alexseitsinger/react-toggled-component

Table of Contents

• createToggledComponent
  • Parameters
  • Examples

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.