@arterial/chips

Arterial Chips

Another React Material Chips

Installation

npm install @arterial/chips

Usage

Styles

Sass

@use "@material/chips/index.scss" as chips;
@include chips.core-styles;
@include chips.set-core-styles;

CSS

import '@material/chips/dist/mdc.chips.css';

JSX

import {Chip, ChipSet} from '@arterial/chips';

Input Chips

Input chips represent a complex piece of information in compact form, such as an entity (person, place, or thing) or text.

const CHIPS = ['Alfa', 'Bravo', 'Charlie', 'Delta'];
function Input() {
  const [chips, setChips] = useState(CHIPS);
  function handleKeyDown(e) {
    const text = e.target.value;
    const isEnter = e.key === 'Enter' || e.keyCode === 13;
    if (!!text && isEnter) {
      const id = text;
      const newChips = [...chips]; // triggers re-render
      if (newChips.some(c => c.text === id)) {
        alert('There is already a chip with that name.');
      } else {
        newChips.push({text, id});
        setChips(newChips);
        e.target.value = '';
      }
    }
  }
  function handleTrailingIconSelect(id) {
    const newChips = chips.filter(c => c.text !== id);
    setChips(newChips);
  }
  return (
    <div className="input-chips">
      <span className="input-chips__label">Input:</span>
      <ChipSet className="input-chips__chip-set" input>
        <div>
          {chips.map(chip => (
            <Chip
              id={chip.text}
              key={chip.text}
              text={chip.text}
              trailingIcon="cancel"
              onTrailingIconSelect={handleTrailingIconSelect}
            />
          ))}
        </div>
        <input className="input-chips__input" onKeyDown={handleKeyDown} />
      </ChipSet>
    </div>
  );
}

Choice Chips

Choice chips allow selection of a single chip from a set of options.

const CHIPS = ['Alfa', 'Bravo', 'Charlie', 'Delta'];
function Choice() {
  const [selected, setSelected] = useState('');
  return (
    <ChipSet choice>
      {CHIPS.map(chip => (
        <Chip
          id={chip.text}
          key={chip.text}
          selected={chip.text === selected}
          text={chip.text}
          onSelect={() => setSelected(chip.text)}
        />
      ))}
    </ChipSet>
  );
}

Filter Chips

Filter chips use tags or descriptive words to filter content.

const CHIPS = ['Alfa', 'Bravo', 'Charlie', 'Delta'];
function Filter() {
  const [selected, setSelected] = useState(new Set());
  function handleSelect(value) {
    const sel = new Set(selected);
    if (sel.has(value)) sel.delete(value);
    else sel.add(value);
    setSelected(sel);
  }
  return (
    <ChipSet filter>
      {CHIPS.map(chip => (
        <Chip
          checkmark
          id={chip.text}
          key={chip.text}
          selected={selected.has(chip.text)}
          text={chip.text}
          onSelect={() => handleSelect(chip.text)}
        />
      ))}
    </ChipSet>
  );
}

Action Chips

Action chips offer actions related to primary content. They should appear dynamically and contextually in a UI.

import {CircularProgress} from '@arterial/circular-progress';

const CHIPS = ['Alfa', 'Bravo', 'Charlie', 'Delta'];
function Action() {
  const [selected, setSelected] = useState(false);
  const [saving, setSaving] = useState(false);
  function icon() {
    if (saving) return <CircularProgress small />;
    if (selected) return 'favorite';
    return 'favorite_outlined';
  }
  function text() {
    if (selected && saving) return 'Removing from favorites';
    else if (saving) return 'Saving to favorites';
    else if (selected) return 'Saved to favorites';
    else return 'Save to favorites';
  }
  function handleSelect() {
    setSaving(true);
    setTimeout(() => {
      setSaving(false);
      setSelected(!selected);
    }, 3000);
  }
  return (
    <Chip
      icon={icon()}
      id="action"
      key="action"
      text={text()}
      onSelect={handleSelect}
    />
  );
}

Other Variants

Icon

Choice chips with icons.

const CHIPS = ['Alfa', 'Bravo', 'Charlie', 'Delta'];
function Icon() {
  const [selected, setSelected] = useState('');
  return (
    <ChipSet choice>
      {CHIPS.map(chip => (
        <Chip
          icon="face"
          id={chip.text}
          key={chip.text}
          selected={chip.text === selected}
          text={chip.text}
          onSelect={() => setSelected(chip.text)}
        />
      ))}
    </ChipSet>
  );
}

Choice and Filter

Choice and filter chips with icons.

const CHIPS = ['Alfa', 'Bravo', 'Charlie', 'Delta'];
function ChoiceFilter() {
  const [selected, setSelected] = useState(new Set());
  function handleSelect(value) {
    const sel = new Set(selected);
    if (sel.has(value)) {
      sel.delete(value);
    } else {
      sel.add(value);
    }
    setSelected(sel);
  }
  return (
    <ChipSet choice filter>
      {CHIPS.map(chip => (
        <Chip
          checkmark
          icon="face"
          id={chip.text}
          key={chip.text}
          selected={selected.has(chip.text)}
          text={chip.text}
          onSelect={() => handleSelect(chip.text)}
        />
      ))}
    </ChipSet>
  );
}

Props

Chip

Name	Type	Description
checkmark	boolean	Enables checkmark to be displayed within root element when element is selected.
className	string	Classes to be applied to the root element.
icon	string | node	Icon to render within root element.
id	string	Id of the element.
onSelect	function	Select event handler.
onTrailingIconSelect	function	Trailing icon select event handler.
ripple	boolean	Enables ripple within root element. Defaults to true.
selected	boolean	Indicates whether the element is selected.
text	string	Text to be displayed within root element.
trailingIcon	string | node	Icon to render on the right side of the root element.
tag	string | object	HTML tag to be applied to the root element. Defaults to div.

ChipSet

Name	Type	Description
children	node	Elements to be displayed within root element.
className	string	Classes to be applied to the root element.
choice	boolean	Enables a choice variant.
filter	boolean	Enables a filter variant.
input	boolean	Enables an input variant.
tag	string | object	HTML tag to be applied to the root element. Defaults to div.