@alexseitsinger/react-toggled-component/README.md

Returns a connected component that renders another component based on the state

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

### 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 (
    <Provider store={store}>
      <Router>
        <Route path={"/"} component={ToggledIndex} exact />
      </Router>
    </Provider>
  )
}

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