npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@rmwc/chip

v14.3.5

Published

RMWC Chip component

Downloads

17,937

Readme

Chips

Chips represent complex entities in small blocks, such as a contact.

  • Module @rmwc/chip
  • Import styles:
    • Using CSS Loader
      • import '@rmwc/chip/styles';
    • Or include stylesheets
      • '@material/chips/dist/mdc.chips.css'
      • '@rmwc/icon/icon.css'
      • '@material/ripple/dist/mdc.ripple.css'
  • MDC Docs: https://material.io/develop/web/components/chips/
<ChipSet>
  <Chip selected label="Cookies" />
  <Chip label="Pizza" />
  <Chip label="Icecream" />
</ChipSet>
<ChipSet>
  <Chip icon="favorite" label="Cookies" trailingIcon="close" />
</ChipSet>
function Example() {
  const [selected, setSelected] = React.useState(false);
  return (
    <ChipSet>
      <Chip
        key="my-chip"
        label="Click Me"
        checkmark
        selected={selected}
        onRemove={(evt) => console.log('onRemove', evt.detail)}
        onInteraction={(evt) => {
          console.log('onInteraction', evt.detail);
          setSelected(!selected);
        }}
        onTrailingIconInteraction={(evt) =>
          console.log('onTrailingIconIteraction', evt.detail)
        }
        trailingIcon="close"
      />
    </ChipSet>
  );
}

Filter and Choice Chipsets

You can specify a ChipSet as either a filter of choice which slightly changes the visual styling of selected chips. While material-components-web has some built in functionality for chip sets, it doesn't fit well with React's unidirectional data flow. It is recommended you use standard React patterns to store selected chips in your state and render them accordingly.

Clicking on the trailing close icon will trigger a close animation and put the chip in an exited state, but it is up to you to remove component out from rendering. The you use the onRemove prop implement this behavior.

function Example() {
  const [selected, setSelected] = React.useState({
    cookies: false,
    pizza: false,
    icecream: false
  });
  const toggleSelected = (key) =>
    setSelected({
      ...selected,
      [key]: !selected[key]
    });

  return (
    <ChipSet filter>
      <Chip
        selected={selected.cookies}
        checkmark
        onInteraction={() => toggleSelected('cookies')}
        label="Cookies"
      />
      <Chip
        selected={selected.pizza}
        checkmark
        onInteraction={() => toggleSelected('pizza')}
        icon="local_pizza"
        label="Pizza"
      />
      <Chip
        selected={selected.icecream}
        checkmark
        onInteraction={() => toggleSelected('icecream')}
        icon="favorite_border"
        label="Icecream"
      />
    </ChipSet>
  );
}
function Example() {
  const [selected, setSelected] = React.useState({
    cookies: false,
    pizza: false,
    icecream: false
  });
  const toggleSelected = (key) =>
    setSelected({
      ...selected,
      [key]: !selected[key]
    });

  return (
    <ChipSet choice>
      <Chip
        selected={selected.cookies}
        onInteraction={() => toggleSelected('cookies')}
        label="Cookies"
      />
      <Chip
        selected={selected.pizza}
        onInteraction={() => toggleSelected('pizza')}
        icon="local_pizza"
        label="Pizza"
      />
      <Chip
        selected={selected.icecream}
        onInteraction={() => toggleSelected('icecream')}
        icon="favorite_border"
        label="Icecream"
      />
    </ChipSet>
  );
}

Chip

A Chip component.

Props

| Name | Type | Description | |------|------|-------------| | checkmark | boolean | Includes an optional checkmark for the chips selected state. | | children | ReactNode | Additional children will be rendered in the text area. | | foundationRef | Ref<any> | Advanced: A reference to the MDCFoundation. | | icon | IconPropT | Instance of an Icon Component. | | id | string | An optional chip ID that will be included in callback evt.detail. If this is not passed, RMWC will attempt to use the "key" prop if present. | | label | ReactNode | Text for your Chip. | | onInteraction | (evt: ChipOnInteractionEventT) => void | A callback for click or enter key. This should be used over onClick for accessibility reasons. evt.detail = { chipId: string } | | onRemove | (evt: ChipOnRemoveEventT) => void | A callback that is fired once the chip is in an exited state from removing it. evt.detail = { chipId: string } | | onTrailingIconInteraction | (evt: ChipOnTrailingIconInteractionEventT) => void | A callback for click or enter key for the trailing icon. material-components-web always treats this as an intent to remove the chip. evt.detail = { chipId: string } | | selected | boolean | makes the Chip appear selected. | | trailingIcon | IconPropT | Instance of an Icon Component. | | trailingIconRemovesChip | boolean | Defaults to true. Set this to false if your trailing icon is something other than a remove button. |

ChipSet

A container for multiple chips.

Props

| Name | Type | Description | |------|------|-------------| | choice | boolean | Creates a choice chipset | | filter | boolean | Creates a filter chipset |