Giter VIP home page Giter VIP logo

react-bootstrap's Introduction

React-Bootstrap

Bootstrap 5 components built with React.

GitHub Actions CI status Travis CI Build status npm Codecov Discord Netlify

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

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's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-bootstrap's Issues

Is react-bootstrap a server side library or can I use it in a browser.

Sorry I'm completely to this these things.
I created a simple test like this

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="http://fb.me/react-0.10.0.js"></script>
    <script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
    <script src="react-bootstrap.js"></script>
</head>
<body>
<div id="react"></div>
<script>
</script>
<script type="text/jsx">
    /**@jsx React.DOM */

var buttonsInstance = (
    <ButtonToolbar>
      <Button>Default</Button>
    </ButtonToolbar>
  );

React.renderComponent(buttonsInstance, document.getElementById('react'));</script>
</body>
</html>

But I'm getting this error in Chrome
Uncaught ReferenceError: ButtonToolbar is not defined

Does this framework only work on the server side?

input onClick doesn't work when input is inside DropdownButton or ButtonToolbar

I am showing a login form with username and password input boxes when a user clicks on a Login button in a DropdownButton which is in a ButtonToolbar. I added onClick to put in a handler to prevent default and stop propagation because currently clicking on the input box causes the menu to close, so I can't type into user input boxes.

              <ul className="nav navbar-nav">
                <li><Link href='/'>Home</Link></li>
                <li><Link href='/register'>Register</Link></li>
              </ul>

              <ul className="nav navbar-nav navbar-right">
                <li>
                    <ButtonToolbar>
                        <DropdownButton bsStyle='default' bsSize='large' title='Login'>
                            <form id="loginForm" accept-charset="UTF-8">
                                <input id="login_username" style={inputStyle} onClick={this.inputClick} type="text" name="username" placeholder="Username" size="30" />
                                <input id="login_password" style={inputStyle} onClick={this.inputClick} type="password" name="password" placeholder="Password" size="30" />
                                <button type="button" className="btn btn-primary" onClick={this.login} style={inputStyle}>Login</button>
                            </form>
                        </DropdownButton>
                    </ButtonToolbar>
                </li>
              </ul>
            </div>
          </nav>

Getting active tab from TabbedArea parent component.

This is probably because I'm new to React, but I can't figure out how to get the selected tab from a TabbedArea parent.

Specific use case:

TabbedArea is part of a form. Want to set a hidden field in TabbedArea's parent to a particular value depending upon which TabPane is active when the form is submitted.

NavBar

Has this not been implemented yet, or am I just missing it.
I see Nav, but that's for the pills and tabs.

Consider implementing simple components

There's a lot of components with no interactivity that would just be wrappers around DOM elements with certain class names: badge, label, well, icon etc.

Should we add these? I'm in 2 minds, it adds a level of abstraction that might be useful if the classes change but creates another, albeit simple, API to learn.

Any comments?

EDIT:

In summation of current state:

  • Badge
  • Label
  • Well
  • Icon
  • Media
  • Thumbnail (See #488)
  • Breadcrumb (See #1273 and #1354)
  • Pager
  • Pagination (See #22 PR #786)
  • Responsive Embed (See #1359)
  • Images (See #1293)
  • Affix (See #200)

Add development example

I wanted to check out a bug but am having a tough time setting up an easy development environment. Do you guys use something better than running grunt build after every change? I'd like to add debugger statements to step through code.

An example of how to work on the code in development would be great.

How to integrate into an actual app?

I am trying to get this running on my app which is using bower to import react-with-addons, and it seems to be really difficult to actually get react-bootstrap into the app. Do you have any documentation on how to import into a existing react app?

Trouble with browserify requires

I've been trying to include react-bootstrap library files using the cjs methods described on the docs page, but have had some problems. I'm using debowerify to make browser_component path lookups more concise.

I'm using several browserify transforms, and the project builds fine until I try to require a module from this library.

I've made a project that demonstrates what I've tried -- perhaps I'm missing something obvious, so that project might help get to the bottom of it. Otherwise it may help tweak the library.

https://github.com/kastork/react-bootstrap-example

The command line and browserify config options are all contained in the package.json file in the script element and the browserify element, which declares which browserify transforms to apply and their order.

Browserify not working with NPM module

If we need the module both server side and on the client would be good to use the npm module for both.
Right now it doesn't work because the exports are created dynamically.

Patch releases more often?

Would it be possible to publish patch releases more often than the larger minor releases? There are fixes, changes, additions that don't break anything and according to semver, should be released as patch versions. It would be nice to have things like the input fix or the navbar changes published to NPM.

Thanks.

NodeWebkit

Hi,

I am confused sorry, can you provide a simple example using this component with nodewebkit.

passing additional classes in a property

Currently I don't see any was to pass in additional classes to the bs component.

In my case I have a <Glyphicon glyph={a.starred ? "star" : "star-empty"} onClick={this.props.handleSwitchFavorite} /> and I wanted to add a yellow-star class to the component... but I couldn't.

Maybe we could append the className prop of the component to the generated className?

It would look like:
<Glyphicon glyph={a.starred ? "star" : "star-empty"} onClick={this.props.handleSwitchFavorite} className="yellow-star" />

Implement ProgressBar

<ProgressBar>
    <ProgressBar 
        bsStyle="warning"
        min="0"
        max="100"
        now="35"
        text="%d% complete (warning)"
       variation="striped"
    />
    <ProgressBar 
        bsStyle="success"
        now="35"
        text="%d% complete"
       variation="active"
    />
</ProgressBar>

IE8 compatibility

It looks like this api isn't working in IE8.

SCRIPT1010: Expected identifier
react-bootstrap.js, line 1446 character 20

This happens when we reference a Button like this:

var Button = require('react-bootstrap').Button;

Any ideas on what's required to get this to function in IE8?

Compatibility with React master

Is react-bootstrap supposed to be compatible with React's master? I get errors with regards to https://github.com/stevoland/react-bootstrap/blob/master/src/react-es6/lib/cloneWithProps.js#L27 being undefined. I see it is a little different from https://github.com/facebook/react/blob/master/src/utils/cloneWithProps.js. If this breaking isn't expected, maybe I can help investigate and fix it, although my knowledge of react/react-bootstrap internals is still limited. I believe it might have to do with the component descriptors now being enforced (after being deprecated in the recent versions of React).

Thank you!

Use Tether in place of Bootstrap overlays?

Overlays are difficult to get right, and Bootstrap doesn't do a perfect job. Their overlays mostly work "okay enough", but there are various weirdnesses.

For instance, you have to add special attributes to buttons that carry popovers and tooltips if they are within button groups: http://getbootstrap.com/javascript/#popovers

I also encounter bugs from the fact that hidden popovers are opacity: 0 in Bootstrap, instead of display: none. This means an inactive popover can "occlude" interface items.

This library claims to do overlays right: http://tether.io , and I think their approach looks very solid.

There's a real value for this project keeping all-and-only-Bootstrap. But there's a cost, too, to locking ourselves in to parts which could be better. I think overlays will be consistently painful, especially because in React you really want to make the overlay a DOM sibling to the trigger, which causes further problems.

How have you guys found Bootstrap's overlay library? Have you also had problems with it?

Consider excluding built files from repo

There are quite a few built files for this repo now, and having these committed along with changes makes it quite difficult to follow the changes and review code. If possible it would be nice to .gitignore the build directories and just build them before publishing NPM or Bower packages. What are your thoughts on this?

Implement Pagination

<Pagination from="1" to "5" step="1" onSelect={handler} first={true} last={true} activeIndex="2" />

<Pagination first={true} activeKey={1} onSelect={handler}>
    <a href="#" key={1}>1</a>
    <a href="#" key={2}>2</a>
    ....
</Pagination>

Where is react-bootstrap.js?

The documentation says this file should be in the bower repo, but I downloaded the bower repo and still don't see it. :-/

Draft component designs

I've written up some thoughts on my blog about how to go about some of the components: http://clozeit.wordpress.com/

I'm pretty happy with the way I've got Buttons, Popovers and Modals working now. I'm making good progress on forms right now, I should have something up on them pretty soon.

Any thoughts?

Don't assign directly to module.exports

Instead of doing this:

module.exports     = React.createClass({

Do this:

var ComponentName  = React.createClass({
...
});
module.exports = ComponentName;

The JSX transform will set a displayName property on the class which is used by the React developer tools to determine the name of the component (in this case, it'll appear as <ComponentName>). If you assign directly to module.exports, the displayName will not be set and the dev tools will just show <Unknown>.

Implement Input

Some ideas

<Input
    type="number"
    addonBefore="$"
    addonAfter=".00"
    label="How much"
    isInline={true}
    bsStyle="warning"
    hasFeedback={true}
    className="col-sm-9"
    labelClassName="col-sm-3"
    groupClassName="blah"
    placeholder="eg: 27"
    help=""
/>

If label prop is present, a .form-group is rendered:

<div class="form-group">
    <label></label>
    <input/>
</div>

if addonBefore or addonAfter prop is present, an .input-group is added:

<div class="form-group">
    <label></label>
    <div class="input-group">
      <span class="input-group-addon">$</span>
      <input/>
      <span class="input-group-addon">.00</span>
    </div>
</div>
  • Other props are transferred to the input.
  • type can also be select, textarea or a custom instance
  • If checkbox or radio, label wraps input
  • hasFeedback adds icons based on bsStyle

DropdownMenu Usage

Is there any documentation for the usage of DropdownMenu? I saw some for DropdownButton but the usage doesn't seem to be the same.

Passing in additional classes

Much similar to #95 but for panels and buttons, the following doesn't seem to work. Is that by design?

<Panel className="bob" header="Header" bsStyle="success">

</Panel>

different to the GlyphIcon, here transfer props to isn't used, by the looks of it.
same goes for button.

Thanks!

James

Start server in docs,response an error?

Error: Invariant Violation: Navbar: You can't call transferPropsTo() on a component that you don't own, header. This usually means you are calling transferPropsTo() on a component passed in as props or children.

How can I resolve this ? :)

Implement ScrollSpy

Not sure how this should be implemented so here's some thinking out loud.

Could be a component that takes one or more Navs as children and a target CSS selector prop:

<ScrollSpy target="body">
    <Nav>
        <NavItem href="#1" key={1}>Item 1</NavItem>
        <NavItem href="#2" key={2}>Item 2</NavItem>
    </Nav>
</ScrollSpy>

This would recurse through the nav props finding hrefs, work out which is the closest to the current scroll position then pass activeHref prop to cloneWithProps nav.

ScrollSpy could also be controlled with a onScrollToItem(href) callback prop.

Actually this could be built straight into Nav: <Nav scrollTarget="body">...</Nav>.

Any thoughts?

Proper way to wrap Tab children

Not sure if I'm not using this correctly or if there is an underlying issue:

I use <TabPane>s inside a <TabbedArea> and I attempted to wrap the content of children:

var MyComponent = React.createClass({
    render: function() {
        var tabs = React.Children.map(this.props.children, function(child, index) {
            return <TabPane key={index} tab={'Tab #' + index}>{child}</TabPane>;
        }
        return <TabbedArea>{tabs}</TabbedArea>;
    }
});

Usage:

<MyComponent>
    <div>Tab content</div>
    <div>Other tab content</div>
</MyComponent>

I get an error because I think it tries to access tabs[0].props.key or tabs.props.key directly. I also tried to wrap <TabPane> directly in my own component (instead of using <div>s as children for <MyComponent>) but things were worse since I believe <TabbedArea> is closely tied to <TabPane> (it needs to be its direct child).

Edit: I just realized that this problem can be avoided by providing a defaultActiveKey, but the same issue comes back in hasTab().

Popovers as Mixins?

I have some notes on how Popovers might be handled:

http://clozeit.wordpress.com/2014/01/09/popover-mixin/

An alternative is actually to just embed the functionality into Button directly, since I actually don't see what else we would want this to do.

My Button implementation, which uses these "clickovers", is here:

var Button = React.createClass({
    mixins: [BootStrapMixin],

    getDefaultProps: function() {return {bsClass: 'button'};},

    render: function() {
        // TODO: Set clickovers to display: none, or destroy them, when not
        // active.
        return this.transferPropsTo(
            <button data-container="body" className={this.extendClassName()}>
                {this.props.children}
            </button>
        );
    },

    componentDidMount: function() {
        if (this.props.clickover) {
            this.props.clickover.html = true;
            this.props.clickover.trigger = 'click';
            $(this.getDOMNode()).popover(this.props.clickover);
        }
    }
});

The TODO comment highlights a current bug with this implementation.

Bootstrap sets opacity: 0 to hidden popovers, instead of display: none. This means that I sometimes get the invisible divs "occluding" my interface items --- you can't click on part of a button, because the hidden popover is in the way.

I've started an alternate ticket to discuss using http://tether.io in place of Bootstrap overlays.

Include FastClick in demo site

I'm new to mobile based web development, and was trying to pick a mobile stack to do development with. I looked at this awhile ago on an ipad and thought that it seemed slow, so I didn't continue with it.

I now realize the reason it seemed slow to me had nothing to do with the lib - it's just the 300ms delay that clicking has in browsers on ios, which can be avoided by using this lib:

https://github.com/ftlabs/fastclick

I think that your demo page should use this lib by default, so devs don't make the mistaken assumption I did that your lib is slow because of slow rendering or something like that.

Thanks!

include static version of html page with examples (ie docs index.html at least)

I think it's always nice to be able to just load a simple example from a repo without compiling / installing a bunch of stuff. At the very least it'd be good to have the index.html file from the docs site available statically as a JSX page. Especially since my site won't be using node.... I just want to use React and Bootstrap without node.

Thanks!

Popovers and Tooltips not showin up properly on svg elements

I'm using this library with om, and the interop is quite nice. The only issue I've come across is is that popovers don't show up centered on the svg element.

example:

(defn offnet-segment
  [app owner]
  (reify
    om/IRenderState
    (render-state [this {:keys [translate scale width control-chan
                                rx ry cursor title data-content]}]
      (dom/g #js {:stroke "black"
                  :transform (str "translate(" translate ") scale(" scale ")")
                  :width width}
             (ReactBootstrap/OverlayTrigger #js {:trigger "click"
                                                 :placement "top"
                                                 :overlay (ReactBootstrap/Popover #js {:title "ID"}
                                                                                  "DESCRIPTION")}
                                            (dom/g nil
                                                   (dom/rect #js {:className "path-element"
                                                                  :x 600
                                                                  :y 120
                                                                  :rx rx
                                                                  :ry ry
                                                                  :width width
                                                                  :height 70
                                                                  :fill "#0c60b7"})
                                                   (dom/text #js {:className "ne-text submit-button"
                                                                  :x (+ 600 (/ width 2))
                                                                  :y 175
                                                                  :fill "white"} "Test")))))))

Example:

The popover should be centred over the svg rectangle.
image

2 tests failing with React master

Chrome 35.0.1916 (Mac OS X 10.9.2) DropdownButton when open should close on click FAILED
    Error: timeout of 2000ms exceeded
        at /Users/stephencollings/ukc/react-bootstrap/node_modules/mocha/mocha.js:4241:14
Chrome 35.0.1916 (Mac OS X 10.9.2) SplitButton when open should close when button is clicked FAILED
    Error: timeout of 2000ms exceeded
        at /Users/stephencollings/ukc/react-bootstrap/node_modules/mocha/mocha.js:4241:14
Chrome 35.0.1916 (Mac OS X 10.9.2): Executed 162 of 162 (2 FAILED) (5.016 secs / 4.24 secs)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.