react-bootstrap/react-bootstrap-typescript

Typescript definitions for React / Bootstrap

React-Bootstrap

Bootstrap 5 components built with React.

Bootstrap compatibility

React-Bootstrap is compatible with various versions of Bootstrap. As such, you need to ensure you are using the correct combination of versions.

See the below table on which version of React-Bootstrap you should be using in your project.

Bootstrap Version	React-Bootstrap Version	Documentation
v5.x	2.x	Link
v4.x	1.x (not maintained)	Link
v3.x	0.33.x (not maintained)	Link

Migrating from previous versions

Bootstrap 4 to Bootstrap 5

If you would like to update React-Bootstrap within an existing project to use Bootstrap 5, please read our docs for migrating to React-Bootstrap V2.

Bootstrap 3 to Bootstrap 4

If you would like to update React-Bootstrap within an existing project to use Bootstrap 4, please read our docs for migrating to React-Bootstrap V1.

Related modules

• react-router-bootstrap – Integration with React Router
• Awesome React Bootstrap Components - Additional components like off-canvas navbar, switch and sliders.

Local setup

Yarn is our package manager of choice here. Check out setup instructions here if you don't have it installed already. After that you can run yarn run bootstrap to install all the needed dependencies.

From there you can:

• Run the tests once with yarn test (Or run them in watch mode with yarn run tdd).
• Start a local copy of the docs site with yarn start
• Or build a local copy of the library with yarn run build

CodeSandbox Examples

Click here to explore some React-Bootstrap CodeSandbox examples.

Click here to automatically open CodeSandbox with the React-Bootstrap CodeSandbox Examples GitHub Repository as a workspace.

Contributions

Yes please! See the contributing guidelines for details.

react-bootstrap-typescript's Issues

How to import specific component from react-bootstrap with Typescript

Earlier my app was in ReactJs + React-bootstrap. Now I'm using Typescript + ReactJs + React-bootstrap

To reduce the size of the app for production Earlier I used to import react-bootstrap components using - import Button from 'react-bootstrap/lib/Button'

After adding Typescript it shows the following error

ERROR in [at-loader] ./components/Hello.tsx:6:8
TS1192: Module ''react-bootstrap/lib/Button'' has no default export.

Attempt 1

import {Button} from 'react-bootstrap/lib/Button' but in this case Button is undefined.

Attempt 2

import * as Button from 'react-bootstrap/lib/Button' but in this case another error pops out

ERROR in [at-loader] ./components/Hello.tsx:54:12
TS2604: JSX element type 'Button' does not have any construct or call signatures.

This error shows error in line <Button bsStyle="danger" bsClass="glyphicon glyphicon-new-window"></Button>

Though import {Button} from 'react-bootstrap' works fine but this is not desired because it results in increasing the size of the app by 200kbs for me.

How can we import specific component from react-bootstrap using Typescript??

I can't find TableRow and Table Col

I am able to use the Table but I can't find TableRow or TableCol. How do we use Table with this package? Thanks.

import { Table } from 'react-bootstrap';

Table does not support "fill" property

The Table component, should according to the docs, support the "fill" attribute, I have tested that modifying the d.ts file for the Table to be like as follows, it will work.

export interface TableProps extends React.Props<TableClass> {
  bordered?: boolean;
  className?: string;
  condensed?: boolean;
  hover?: boolean;
  responsive?: boolean;
  striped?: boolean;
  fill?: boolean;
}

Needs to be updated on DefinitelyTyped ?

These typings are not updated with the DefinitelyTyped repo, and are hence not working with the new Typescript2 @types/react-bootstrap package.

No version number

It would be useful to have a version number for the version of React Boostrap these typing describe.

Archive this repo?

Shouldn't this repo be archived now that we've got @typings/react-bootstrap from DefinitelyTyped?

bs-Properties are not supported in type definitions

I am trying to convert my bootstrap-react app to TypeScript. Almost everything works fine, but all of the "bs" attributes are not present in the type definitions.
I regularly use "bsClass" and "bsSize" on all react-bootstrap controls, but I get an "property does not exist" error from the ts compiler.
How would I go for that?

Guenter

tds points to react-bootstrap/src instead of react-bootstrap/lib

I get this err:

Module not found: Error: Cannot resolve module 'react-bootstrap/src/Button'

The path of the lib is node_modules/react-bootstrap/lib/Button

I'm doing something wrong or TSD need to be updated ?

Regards,

How to import ControlLabel and HelpBlock?

I cannot find them in the code.