react-bootstrap / react-bootstrap Goto Github PK

View Code? Open in Web Editor NEW

22.5K 415.0 3.6K 31.71 MB

Bootstrap components built with React

Home Page: https://react-bootstrap.github.io/

License: MIT License

JavaScript 20.62% TypeScript 66.45% SCSS 0.63% CSS 0.30% MDX 11.99%

react bootstrap hacktoberfest react-components typescript javascript

react-bootstrap's Introduction

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

Contributors

Stargazers

Watchers

Forkers

pieterv syllog1sm misino delaguardo mgechev stevie-mayhew kellec randylien bvleur chollier cvent-archive quri erithmetic encode-dcc gtod awei01 jsdir mathieumg msealand maktouch cassus jeroencoumans novivia aamirafridi hedgerwang repos-bootstrap repos-javascript-frameworks ruffle1986 jonasoberschweiber hcarvalhoalves gschambers alexodle stereosteve sahat jhiswin malonecj jaredwy fannarsh reusablecode jamestrigg bovard jefffriesen knisterpeter mpowaga browniefed mtscout6 bitsofalex glenjamin dozoisch jtlapp trentgrover-wf moonlimb lucasfrey heswell azerothian pelonpelon inno-v egao1980 billschaller alasdaircs marvelouslightservices gothack esbullington uschen-thirdparty mazira tompaton tobeyouth justjake roykunglin kbaylosis caa1211 frontenda eddievlagea gareth-tucker sahusoftcom chriskjaer smbecker airnoir laiff jcranendonk isaiah neener54 robertkielty ayecue jquense skratchdot jtsay362 wayinco pcardune justin808 christianalfoni hipertracker interexchange kwspl nytramr swesh wemcdonald mfunkie semigradsky joar

react-bootstrap's Issues

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 ? :)

0.6.x releases missing from npm / 0.5.x tags missing from git

Maybe a typo during package upload to https://www.npmjs.org/package/react-bootstrap/ ?

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?

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?

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.

Tabs with dropdowns in nav

Is this feature on the to-do list (if at all)? http://getbootstrap.com/components/#nav-dropdowns

I see https://react-bootstrap.github.io/components.html#navbars, but I didn't find a way to use a <DropdownButton> as one of the <TabPane>s in a <TabbedArea>.

Thanks!

How do you copy files to the -npm and -bower repositories ?

I'm using your file skeleton to publish a project I started to work on recently ( https://github.com/quri/react-bootstrap-datetimepicker )

I was curious about your strategy to update these repos, do you copy the files in amd and cjs manually or do you rather have an automated way to perform that ?

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.

Publish react version change to NPM

Would like to use this project with the latest version of React via NPM.

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

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?

NodeWebkit

Hi,

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

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.

Company

              <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>

Add propTypes + JSDoc blocks to current components + generate API docs from them

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.

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?

Add gh-pages including generated API docs

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.

Why there isn't a table component?

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:

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

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.

Generate AMD + CJS index automatically during build

Replace these with one generated automatically:

https://github.com/stevoland/react-bootstrap/blob/master/tools/amd/index.js
https://github.com/stevoland/react-bootstrap/blob/master/tools/cjs/main.js

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. :-/

justified button groups render incorrectly

<ButtonGroup justified>

renders

class="btn-group btn-group-justified"

The bootstrap docs suggest it should be

class="btn-group.btn-group-justified"

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>

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().

Add tests for DropdownButton and SplitButton

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)

Is it okay to mix large chunk of html and jsx in one file?

I'm browsing through this file:

https://github.com/stevoland/react-bootstrap/blob/master/docs/src/ComponentsPage.js

and surprised to find there are a large chunks of html contents and jsx mixed up together, just wondering is this the best practice to tackle such use case?

or there is better way to do it?

Thanks.

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?

NavBar

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

code in Getting Started docs should be syntax highlighted

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" />

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?

Build AMD with grunt-contrib-requirejs rather than calling out to shell

Couldn't get the build config to work with grunt-contrib-requirejs for some reason

The workaround doesn't stop the build on errors: https://github.com/stevoland/react-bootstrap/blob/master/Gruntfile.js#L111

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!

Move to ES6 modules and build to CJS, AMD + global

Convert source to ES6 modules and transpile using: https://github.com/square/es6-module-transpiler

I'd like each component to be requirable as they are at the moment but this thing with 'default' exports kind of breaks that unless each component has a wrapper generated too.

Maybe move the building to Grunt as it will get a bit more complex.

Implement Panel + PanelGroup

Should support normal + collapsable panels in both controlled and uncontrolled variations

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.

Consider changing bsVariation props

Should we change things like <ProgressBar bsVariation="striped" /> to <ProgressBar striped /> ?

Seems better to me now.

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!

Update our copy of `cloneWithProps`

To support ref: facebook/react@4cbc4b5

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!

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.

Create LICENSE file

And add a license to it.

Here is the bootstrap one for reference which is licensed under MIT https://github.com/twbs/bootstrap/blob/master/LICENSE

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 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>

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.

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?

react-bootstrap / react-bootstrap Goto Github PK

react-bootstrap's Introduction

React-Bootstrap

Bootstrap compatibility

Migrating from previous versions

Bootstrap 4 to Bootstrap 5

Bootstrap 3 to Bootstrap 4

Related modules

Local setup

CodeSandbox Examples

Contributions

react-bootstrap's People

Contributors

Stargazers

Watchers

Forkers

react-bootstrap's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs