Function ChemicalChips

ChemicalChips(props: ChemicalChipsProps): null | Element

One clickable chip per reagent in the executed query. A boolean query such as (sodium OR potassium) hydroxide OR potassium carbonate expands to three chips.

Parameters

props: ChemicalChipsProps
See ChemicalChipsProps.

Returns null | Element

The chip row, or nothing when the query names no reagents.

Component

Example

<ChemicalChips query="acetone" onSelect={setSelected} />

Source

export function ChemicalChips({ query, onSelect }: ChemicalChipsProps) {
  const names = useMemo(() => extractReagentNames(parseSearchQuery(query).ast), [query]);
  if (names.length === 0) return null;

  return (
    <Stack direction="row" spacing={0.5} useFlexGap flexWrap="wrap" alignItems="center">
      <Typography variant="body2" fontWeight={600}>
        {i18n('chem_info_searched_for')}
      </Typography>
      {names.map((name) => (
        <Chip
          key={name.toLowerCase()}
          size="small"
          label={name}
          onClick={() => onSelect(name)}
          aria-label={i18n('chem_info_chip_aria', [name])}
        />
      ))}
    </Stack>
  );
}