@asphalt-react/content-switcher

Contentswitcher

Component to switch between 2 or more blocks of content, only one block of content is displayed at a time. Contentswitcher does not maintain any internal state, so to switch between content, state should be managed by parent. It is useful when you need to switch between content in more than one places in a single page.

Note: You can have maximum 3 Switchers in ContentSwitcher.

Usage

import React, { useState } from "react"
import ContentSwitcher, { Switch } from "@asphalt-react/content-switcher"

function App() {
  const [active, setActive] = useState(0)
  const clickHandler = (event, active) => setActive(active)
  return (
    <main>
      <ContentSwitcher active={active} onAction={clickHandler}>
        <Switch value={0}>First</Switch>
        <Switch value={1}>Second</Switch>
      </ContentSwitcher>
      <div>
        {active === 0 ? <div>First Section</div> : <div>Second Section</div>}
      </div>
    </main>
  )
}

export default App

Props

children

Blocks of contents to switch between

type	required	default
node	true	N/A

active

Index of the active Switch

type	required	default
enum	false	0

onAction

Function to be called when active Switch changes

type	required	default
func	false	N/A

Switch

Props

children

Label of content to switch between

type	required	default
string	true	N/A

value

Index of the Switch

type	required	default
enum	true	N/A