Reactstrap: Roadmap to Stable Release

[eddywashere]

Some of these items include nested components, listing only top level sections.

• [x] Tables
• [x] Container
• [x] Row
• [x] Col
• [x] Button
• [x] ButtonGroup
• [x] ButtonDropdown
• [x] Dropdown
• [x] Modal
• [x] Popover
• [x] Tag
• [x] Card
• [x] Tooltip
• [x] Navbar
• [x] Nav
  
  
  
  • [x] TabContent, TabPane
  
  
• [x] Forms (In Progress)
• [x] Jumbotron
• [x] InputGroup
• [x] Alert
• [x] MediaObject
• [x] Breadcrumb
• [x] Pagination
• [x] Progress
• [x] ListGroup
• [ ] Scrollspy
• [x] Collapse
• [x] Carousel
• [ ] Utilities
• [ ] Better Documentation for customizing component output with tag prop

Each component should have an individual issue to track status that contains the following

• any component names necessary
• propTypes for each component
• example react markup

[eddywashere]

Moving these to individual issues. I'd like to be able to sort these issues by reactions on the issue description. More 👍's by the community would hopefully mean a higher priority.

[spark-studio]

is there any example i can use about React Router with reactstrap?
thnks

[eddywashere]

@sidekickstudio a little late, but check out the docs, it uses react router and passes through Link to the tag prop of link components. ex: https://github.com/reactstrap/reactstrap/blob/f23a323f2903c8a3defb0add2d8490124bbd2cc0/docs/lib/UI/Nav.js#L12

[georgiosd]

No typeahead/autocomplete? :(

[TheSharpieOne]

@georgiosd this project aims to support what bootstrap itself supports and bootstrap doesn't support typeahead/autocomplete out of the box AFAIK.

[stevokk]

@georgiosd check out react-autosuggest - I've got it up and running fairly easily, it uses AutoWhatever under the hood allowing you to theme it with bootstrap classes.

[cr101]

@stevokk Does react-autosuggest work with non-hard-coded suggestions? As in, retrieving the suggestions from the database based the on user input?

[stevokk]

I load all my data to search on component mount as it is a small dataset, but I see no issue using the following to accomplish it:

  // Called by AutoSuggest on field change
  onChange(event, { newValue }) {
    this.setState({
      searchTerm: newValue
    });
  }

  // Autosuggest will call this function every time you need to update suggestions.
  // 
  onSuggestionsFetchRequested({ value }) {
    fetch(`${API_URL}/search?q=${this.state.searchTerm}`)
        .then((response) => this.setState({searchResults: response}));
  }

[cr101]

@stevokk I'd like to implement an instant search and that might work. Thanks

[RohanDamani]

I see Row and Col, will there be a solution for Grid?

[TheSharpieOne]

@RohanDamani reactstrap support what bootstrap supports and bootstrap says nope

[joeldsouzax]

Hey, does this support bootstrap flex?

[TheSharpieOne]

It supports bootstrap layouts which use flexbox.
You can also add the flexbox utilities to components, but there currently is no utility props.

[AshishKapoor]

No responsive images?

[TheSharpieOne]

There is no special code/js for responsive images, just the css via a class. Since it is just the class and no variations there is no component for it. You just have to add className to your img tag. This is similar for utility type classes.

[Lug16]

Great tool. Any plans on "Scrollspy"?

[salilchhetri]

4.x introduced some breaking changes, you'll need to import Link from react-router-dom.
import { Link } from 'react-router-dom'

[dkati]

good evening ? any way to show charts (any kind of it) with reactstrap ?
cant find anything

[TheSharpieOne]

Bootstrap doesn't have charts so neither does reactstrap.

[elisechant]

Icons ?

[TheSharpieOne]

Bootstrap v4 doesn't have icons, it's a separate package. You can include them and use them the same was with reactstrap as you would with bootstrap.