CODEWITHSUNDEEP
react-select
dgwyer
dgwyer

Reputation: 799

Limit number of visible items in dropdown

I need to limit the number of visible options displayed in the react-select dropdown panel.

At the moment it shows around 9 items but I need that limited to 5. I'm not sure how to go about making changes to the dropdown.

Upvotes: 5

Views: 6660

Answers (2)

dgwyer
dgwyer

Reputation: 799

I figured this out by overriding core component styles. It was just a case of finding which component rendered the styles I was interested in.

In this case it was the menuList component that controlled the visible items in the dropdown. To override the component styles this is what I used:

const selectStyles = {
  menuList: styles => {
    console.log('menuList:', styles);
    return {
      ...styles,
      maxHeight: 136
    };
  }
};

return (
  <Select
    value={selectVal}
    onChange={updateVal}
    options={options}
    styles={selectStyles}
  />
);

I found it very useful to console.log out the component styles to see what styles are available for a particular component as well as the default values used.

Upvotes: 4

Trần C&#244;ng
Trần C&#244;ng

Reputation: 298

Do you use this react-dropdown library https://www.npmjs.com/package/react-dropdown-select?

This library has options attributes. Which are the options the user can select. For this answer. You can put 5 items in options like follow.

const options = [
  {key: '1', value: 'first'},
  {key: '2', value: 'two'},
  {key: '3', value: 'three'},
  {key: '4', value: 'four'},
  {key: '5', value: 'five'}
];

<react-dropdown-selecte options={options} />

Upvotes: 1

Related Questions