### Table of Contents - [createToggledComponent][1] - [Parameters][2] - [Examples][3] ## createToggledComponent Returns a connected component that renders another component based on the state. ### Parameters - `$0` **[Object][4]** - `$0.components.Anonymous` - `$0.components.Authenticated` - `$0.state` - `$0.connect` - `components` **[Object][4]** The Anonymous and Authenticated components to use for rendering. - `state` **[Object][4]** The path to the reducer state key we want to check for truthiness. - `connect` **[Function][5]** The connect function to use for connecting to redux. ### Examples ```javascript 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 ( ) } export default App ``` Returns **[Function][5]** A connected component that has some state mapped for toggling. [1]: #createtoggledcomponent [2]: #parameters [3]: #examples [4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object [5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function