CODEWITHSUNDEEP
reactjstwitter-bootstrap-3react-bootstrap
LowCool
LowCool

Reputation: 1411

how to show options on hover in react bootstrap

I have added DropDownButton in my react code I want to show all options on hover to my button but I searched in docs I dint get any options for this below is my code

<DropdownButton
                                bsSize="small"
                                className="ddown"
                                role="menuitem"
                                title="Prgoram Profile">
                                <MenuItem href="#books">Books</MenuItem>

                            </DropdownButton>

can anyone please let me know how to do it? I checked here but Idint get much idea

Upvotes: 4

Views: 4630

Answers (2)

Erez Lieberman
Erez Lieberman

Reputation: 2027

this solution works great but if you have more than one DropdownButton in your component it will open all menus at once when you hover on one of them...

so based on canaan solution and according to my scenario i made something like this:

createNavDropDownItem(item, index, id) {

        const tabsArray = item.Children.filter(item => !item.notATab);
        const items = tabsArray.map((item, index) => (<MenuItem {...this.getSharedProps(item, index)}>
            <a>{SDK.RequestBuilderUtils.getFormatMessage(this.language, this.messages, item.Name, item.Name)}</a>
        </MenuItem>));
        return <NavDropdown
            {...this.getSharedProps(item, index)}
            onMouseEnter={(e) => this.setState({ [`show-${index}`]: true })}
            onMouseLeave={(e) => this.setState({ [`show-${index}`]: false })}
            open={this.state[`show-${index}`]}
        >
            {items}
        </NavDropdown>

    }

Upvotes: 0

canaan seaton
canaan seaton

Reputation: 6868

Im unsure about react bootstrap in general though you could use vanilla react by make use of the onMouseEnter and onMouseLeave events

e.g.

import React, { Component } from 'react'

export default class SomeComponent extends Component {
    constructor() {
        super();

        this.state = {
            show: false
        }
    };

    render() {
        return (
            <DropdownButton
            bsSize="small"
            className="ddown"
            role="menuitem"
            title="Program Profile"
            onMouseEnter={(e) => this.setState({ show: true })}
            onMouseLeave={(e) => this.setState({ show: false })}
            open={this.state.show}>
            <MenuItem href="#books">Books</MenuItem>

            </DropdownButton>
        );
    };
}

Upvotes: 5

Related Questions