How customize reactstrap dropdown in reactJS

Question

Created sample application with ReactJS and install reactstrap for boostrap. I use dropdown components in application that is working fine. code is

<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
    <DropdownToggle caret>
      Dropdown
    </DropdownToggle>
    <DropdownMenu>
      <DropdownItem>Another Action</DropdownItem>
      <DropdownItem>Another Action</DropdownItem>
    </DropdownMenu>
</Dropdown>

but i have to change .

Like currently they passing text only

. But

I have to pass 3 things like icon,heading and sub heading

so can I change DropdownItem.js code for this type of customization ?

I have to make dropdown similar to this image http://prntscr.com/f34zoo

Thanks in advance

Black Mamba · Accepted Answer · 2018-05-11 06:26:21Z

8

It is possible to have custom menu items:

As it is specified on the official website:

<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
   <span
      onClick={this.toggle}
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded={this.state.dropdownOpen}
      >
   Custom Dropdown Content
   </span>
   <DropdownMenu>
      <div onClick={this.toggle}>
          <i class="some-icon"/>
          <h3>Some heading</h3>
          <p>Some sub heading</p>
      </div>
      <div onClick={this.toggle}>
          <i class="some-icon"/>
          <h3>Some heading</h3>
          <p>Some sub heading</p>
      </div>
      <div onClick={this.toggle}>
          <i class="some-icon"/>
          <h3>Some heading</h3>
          <p>Some sub heading</p>
      </div>
   </DropdownMenu>
</Dropdown>

edited May 11, 2018 at 6:26

Black Mamba

15.8k7 gold badges94 silver badges113 bronze badges

answered May 2, 2017 at 7:13

Shota

7,3989 gold badges40 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Paresh Gami Over a year ago

Ok understand so we dont need to change DropdownItem.js for custom styled dropdown right?

Shota Over a year ago

yes you can pass down your HTML elements instead of just text, and then customize it with CSS.

Shota Over a year ago

Please check "Custom Dropdown" section.

Karan · Accepted Answer · 2019-07-30 10:34:46Z

5

There is a better way to do it. If you want the dropdown toggle to be like:

<div>
  <span>{selectedShop ? selectedShop.shopCity : ''}</span>
  <FaChevronDown />
</div>

Then your DropdownToggle should be like (see the tag attribute):

<DropdownToggle tag="div">
  <span>{selectedShop ? selectedShop.shopCity : ''}</span>
  <FaChevronDown />
</DropdownToggle>

The tag props takes the html tag for wrapping the dropdown toggle content. Now you can style ur div any way you want.

Note: By default the tag is a button.

Now, for your dropdown items. You can simply do something like this:

<DropdownItem onClick={() => onShopChange(shopToMap)}>
  <i class="some-icon" />
  <h3>Some heading</h3>
  <p>Some sub heading</p>{' '}
</DropdownItem>

Note: Even for DropdownItem you can specify tag prop.

answered Jul 30, 2019 at 10:34

Karan

2853 silver badges9 bronze badges

2 Comments

Nik Over a year ago

very simple and clean solution

Ilias.P Over a year ago

this should be the accepted answer, gives you total control on how the toggle is rendered

Collectives™ on Stack Overflow

How customize reactstrap dropdown in reactJS

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related