CODEWITHSUNDEEP
reactjsreactstrap
Paresh Gami
Paresh Gami

Reputation: 4782

How customize reactstrap dropdown in reactJS

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

Upvotes: 2

Views: 12700

Answers (2)

Karan
Karan

Reputation: 285

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.

Upvotes: 5

Shota
Shota

Reputation: 7330

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>

Upvotes: 8

Related Questions