@asphalt-react/content-switcher v1.16.0

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

active

Index of the active Switch

onAction

Function to be called when active Switch changes

Switch

Props

children

Label of content to switch between

value

Index of the Switch