@alexseitsinger/react-toggled-component

1.0.0 • Public • Published

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.

Package Sidebar

Install

npm i @alexseitsinger/react-toggled-component

Weekly Downloads

3

Version

1.0.0

License

BSD-2-Clause

Unpacked Size

130 kB

Total Files

7

Last publish

Collaborators

  • alexseitsinger