19.13.0 • Published 8 months ago

@commercetools-uikit/view-switcher v19.13.0

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

ViewSwitcher

Description

The <ViewSwitcher> component allow users to toggle between two or more different views of the same, similar or related content items within the same space on screen.

When to use

Let users toggle between different formatting's, like with a grid view and a table view.

When not to use

Do not use the <ViewSwitcher> as tabs. Tabs should be used when the content on the page is divided into related sections but without any overlap.

Do not use the <ViewSwitcher> as toggle. Toggles are used for "yes/no" or "on/off" binary decisions.

Do's and Don'ts

  • If you use an icon within the <ViewSwitcher>, each switch needs to have an icon.
  • No colored icons are allowed. Only --color-solid (black).
  • Do not use two lines of text in one switch field.

Installation

yarn add @commercetools-uikit/view-switcher
npm --save install @commercetools-uikit/view-switcher

Additionally install the peer dependencies (if not present)

yarn add react
npm --save install react

Usage

import { useState } from 'react';
import ViewSwitcher from '@commercetools-uikit/view-switcher';

/**
 * 1. Uncontrolled mode
 *
 * The component controls its own internal state and switching between options.
 * The `defaultSelected` value is only used on the initial render. Changes to that value
 * are not reflected in the component state.
 */
const UncontrolledExample = () => (
  <ViewSwitcher.Group
    defaultSelected="button 2"
    onChange={(value) => console.log(value)}
  >
    <ViewSwitcher.Button isDisabled value="button 1">
      View 1
    </ViewSwitcher.Button>
    <ViewSwitcher.Button value="button 2">View 2</ViewSwitcher.Button>
    <ViewSwitcher.Button value="button 3">View 3</ViewSwitcher.Button>
  </ViewSwitcher.Group>
);

/**
 * 2. Controlled mode
 *
 * The component is controlled from a parent component, using the prop `selectedValue`.
 * The component does not use an internal state and the parent must implement the `onChange` callback.
 */
const ControlledExample = () => {
  const [seletedValue, setSelectedValue] = useState('button 1');

  return (
    <ViewSwitcher.Group
      selectedValue={seletedValue}
      onChange={setSelectedValue}
    >
      <ViewSwitcher.Button isDisabled value="button 1">
        View 1
      </ViewSwitcher.Button>
      <ViewSwitcher.Button value="button 2">View 2</ViewSwitcher.Button>
      <ViewSwitcher.Button value="button 3">View 3</ViewSwitcher.Button>
    </ViewSwitcher.Group>
  );
};

export { UncontrolledExample, ControlledExample };

Properties

PropsTypeRequiredDefaultDescription
isCondensedbooleanIndicates that the view switcher can be reduced to save space.
childrenReactNodePass one or more ViewSwitcher.Button components.
onChangeFunctionSee signature.Will be triggered whenever a ViewSwitcher.Button is selected. Called with the ViewSwitcherButton value. This function is only required when the component is controlled.
defaultSelectedstringPassing this prop makes the component an uncontrolled component. Indicates the default selected button it is only used to as an initial state once, when the component mounts.
selectedValuestringPassing this prop makes the component an controlled component. Controlled components also require to pass a onChange callback function.

Signatures

Signature onChange

(value: string) => void

Invariants

  1. The ViewSwitcher.Group must have at least one ViewSwitcher.Button element as children
19.13.0

8 months ago

19.12.1

9 months ago

19.12.0

9 months ago

19.11.0

10 months ago

19.10.0

11 months ago

19.4.0

1 year ago

19.8.0

11 months ago

19.7.0

12 months ago

19.6.0

1 year ago

19.5.0

1 year ago

19.9.0

11 months ago

19.3.1

1 year ago

19.3.0

1 year ago

19.2.0

1 year ago

19.1.0

1 year ago

19.0.0

1 year ago

18.5.0

1 year ago

18.4.0

1 year ago

18.3.0

1 year ago

18.2.0

1 year ago

18.1.0

1 year ago

18.0.0

1 year ago

17.1.0

1 year ago

17.0.1

1 year ago

17.0.0

1 year ago

16.12.1

2 years ago

16.12.0

2 years ago

16.5.0

2 years ago

16.6.1

2 years ago

16.6.0

2 years ago

16.4.1

2 years ago

16.9.0

2 years ago

16.11.0

2 years ago

16.10.0

2 years ago

16.7.3

2 years ago

16.7.2

2 years ago

16.7.1

2 years ago

16.7.0

2 years ago

16.7.5

2 years ago

16.7.4

2 years ago

16.8.0

2 years ago

16.4.0

2 years ago

16.3.0

2 years ago

16.2.1

2 years ago

16.2.0

2 years ago

16.1.1

2 years ago

16.1.0

2 years ago

15.15.0

2 years ago

15.15.1

2 years ago

16.0.0

2 years ago

15.13.2

2 years ago

15.14.3

2 years ago

15.14.1

2 years ago

15.14.2

2 years ago

15.14.0

2 years ago

15.13.1

2 years ago

15.13.0

2 years ago

15.12.0

2 years ago

15.10.0

2 years ago

15.9.0

2 years ago

15.11.2

2 years ago

15.11.0

2 years ago

15.11.1

2 years ago

15.7.0

3 years ago

15.4.0

3 years ago

15.8.0

3 years ago

15.5.0

3 years ago

15.5.1

3 years ago

15.6.0

3 years ago

15.3.0

3 years ago

15.2.4

3 years ago

15.2.1

3 years ago

15.2.2

3 years ago

15.2.3

3 years ago

15.2.0

3 years ago

15.1.2

3 years ago

15.1.1

3 years ago

15.1.0

3 years ago