Limit the number of Chips in the container

[Hung Luong]

Hi Syncfusion's Team,

I'm using the Chip Component. I want to limit the number of displayed chips and show the text '+ more' instead, similar to MultiSelect. Is there a way to achieve this?

Thanks.

[Prasanth Madhaiyan]

Hi Hung,

Greetings from Syncfusion support.

Based on the shared details, we understand that your requirement is to limit the number of displayed chips and show the text '+ more' at your end in the React Chips component. You can achieve this by using state in the React Chips component and conditional rendering.

In the below sample, we have added a showAllChips state variable using the useState hook to track whether all chips should be displayed or just a limited number. The displayedChips variable is used to determine which chips to display based on the value of showAllChips.

Additionally, we have added a "Show More" button (+ more) that will appear only if there are more than 3 items and not all chips are currently displayed. When clicked, it will set showAllChips to true, displaying all the chips.

Refer to the below code snippets.

[index.js]

 

const Default = () => {

  const [showAllChips, setShowAllChips] = useState(false);

  const items = [

      {

        text: 'chip1',

        id: '1',

        cssClass: 'e-primary',

      },

      {

        text: 'chip2',

        id: '2',

        cssClass: 'e-info',

      },

      {

        text: 'chip3',

        id: '3',

        cssClass: 'e-success',

      },

      {

        text: 'chip4',

        id: '4',

        cssClass: 'e-warning',

      },

      {

        text: 'chip5',

        id: '5',

        cssClass: 'e-danger',

      },

      {

        text: 'chip6',

        id: '6',

        cssClass: 'e-primary',

      },

    ];

 

  const displayedChips = showAllChips ? items : items.slice(0, 3);

 

  const handleShowMoreClick = () => {

      setShowAllChips(true);

  }

 

  return (

      <div>

          <div className="control-section">

              <div id="chip-default-wrapper">

                  <div className="chips-headers">Chips</div>

                  <div className="sample-padding">

                      {/* initialize default chip component */}

                      <ChipListComponent id="chip-default"  chips={displayedChips}>

                      </ChipListComponent>

                      {!showAllChips && items.length > 3 &&

                          <div className="show-more" onClick={handleShowMoreClick}>+ more</div>

                      }

                  </div>

              </div>

          </div>

      </div>

  );

};

 

For your reference, we have attached the sample and screenshot.

Sample: https://stackblitz.com/edit/react-awomee-fhjnnc?file=index.js

Screenshot:

Check out the attached sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

[Hung Luong]

Hi Prasanth Madhaiyan,

Thank you for your support.

Is there a way for me to limit the number of chips based on the width of the container that holds them? This means it will self-limit the quantity and display "more +" when it exceeds the width of the its container.

Thanks.

[Prasanth Madhaiyan]

Hi Hung,

Based on the details you provided, we understand that your requirement is to limit the number of chips based on the width of the container in the React Chips component. However, we would like to inform you that once the chip is rendered in the DOM, we can only calculate its width, as the chip width will vary depending on the text. This is the default behavior of the React Chips component. Therefore, it is not possible to achieve your specified requirement in the Chips component.

For your reference, we have attached the demo and documentation of the Chips component.

Demo: https://ej2.syncfusion.com/react/demos/#/material3/chips/default

Documentation: https://ej2.syncfusion.com/react/documentation/chips/getting-started

Check out the shared details and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.