Miss any of our Open RFC calls?Watch the recordings here! »

@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.

Install

npm i @alexseitsinger/react-toggled-component

DownloadsWeekly Downloads

85

Version

1.0.0

License

BSD-2-Clause

Unpacked Size

130 kB

Total Files

7

Last publish

Collaborators

  • avatar