React-Bootstrap - importing modules

Question

I'm trying to use react-bootstrap. See the code below. If I load individual modules (eg. Button, ButtonGroup, etc.), it works fine. I'd rather, however, import the whole ReactBootstrap (like in line 2 below) but then, it does not recognise elements like . How do I do it?

import React from 'react';
import ReactBootstrap from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import { ButtonGroup } from 'react-bootstrap';
import { DropdownButton } from 'react-bootstrap';
import { MenuItem } from 'react-bootstrap';

const NavBar = (props) => {

    return (
        <div>
            <Button bsStyle="success" bsSize="small">
                Something
            </Button>
            <ButtonGroup>
                <DropdownButton bsStyle="success" title="Dropdown">
                    <MenuItem key="1">Dropdown link</MenuItem>
                    <MenuItem key="2">Dropdown link</MenuItem>
                </DropdownButton>
                <Button bsStyle="info">Middle</Button>
                <Button bsStyle="info">Right</Button>
            </ButtonGroup>
        </div>
    )

}

export default NavBar;

Thank you

Answer 1

react-bootstrap doesn't have a default export, so the default import syntax (import ReactBootstrap from 'react-bootstrap') cannot be used in this case. You can do the following though:

import * as ReactBootstrap from 'react-bootstrap';

<ReactBootstrap.Button bsStyle="success" bsSize="small">
  Something
</ReactBootstrap.Button>

Answer 2

The answer provided by Nick is not recommended as it will bloat your component.

Rather use the named imports however in a better syntax.

import { Button,  ButtonGroup, DropdownButton, MenuItem } from 'react-bootstrap';

This way you know what you are importing and keep the component size to a minimum