Stack Overflow
Stack Overflow

Questions tagged [reactstrap]

Stateless React Components for Bootstrap 4.

React Bootstrap 4 components that favor composition and control. The library does not depend on jQuery or Bootstrap javascript. However, Poppers.js via react-popper is relied upon for advanced positioning of content like Tooltips, Popovers, and auto-flipping Dropdowns.

The library documentation can be found in github.

778 questions
72
votes
5 answers

What is difference between reactstrap and react-bootstrap?

I found two different bootstraps for reactjs npm install --save reactstrap react react-dom npm install react-bootstrap bootstrap What is the basic and main difference between both?
Pallav Raj
  • 1,684
  • 3
  • 17
  • 29
68
votes
5 answers

Warning: validateDOMNesting(...): cannot appear as a descendant of

I'm trying to use react-router with reactstrap with create-react-app. In the routing page, I needed to use state for the reactstrap, so I converted the router from a variable to a class, but I get this warning: Warning: validateDOMNesting(...): …
Amr
  • 759
  • 1
  • 6
  • 13
27
votes
6 answers

ml-auto is not pushing navbar links to the right

I'm using reactstrap and have been following this link: https://reactstrap.github.io/components/navbar/ In the example, the
cjones
  • 8,384
  • 17
  • 81
  • 175
26
votes
12 answers

How can I add a link within a DropdownItem with reactstrap?

How can I add a link within a DropdownItem with reactstrap? I would like to add a link within a dropdown menu, but how can I add it because in the reactstrap documentation I could not find anything related. import React from 'react'; import { Fade,…
Gerardo Bautista
  • 795
  • 3
  • 11
  • 19
25
votes
3 answers

Using reactstrap with Next.js

I am creating a React app using Next.js and am trying to use components provided by reactstrap. The issue I seem to be running into seems to involve importing the CSS file named bootstrap/dist/css/bootstrap.min.css as the reactstrap guide says to…
gsapienza
  • 283
  • 1
  • 3
  • 7
23
votes
3 answers

How to set selected item in reactstrap Dropdown?

How to set selected item in reactstrap Dropdown? There is example of dropdown: https://reactstrap.github.io/components/dropdowns/ When I select item in dropdown, it is not displayed. *******************Working…
user657009
  • 722
  • 2
  • 6
  • 18
17
votes
5 answers

In create-react-app, adding Bootstrap 4?

Since create-react-app hides Webpack config without having to use eject, if I want to use something like reactstrap or react-bootstrap, should I eject or will I be fine without ejecting? Just curious as to what point one would decide when they need…
Mark
  • 1,812
  • 3
  • 29
  • 51
16
votes
3 answers

React / Reactstrap Warning: Legacy context API has been detected within a strict-mode tree

This is brand new install - I have not put any transitions on the Alert component To replicate the code it is simple import React from "react"; import { Alert } from "reactstrap"; export const Index = () => { return (
Michael Nelles
  • 5,426
  • 8
  • 41
  • 57
16
votes
5 answers

How to change background colors in Reactstrap

I am using react strap to help style an application I'm creating, however I can't figure out how to change the background color of the nav from white to black. I have tried to color ="dark" in the nav tabs tag but that hasn't work. Any help? import…
shak.s
  • 419
  • 2
  • 7
  • 15
14
votes
2 answers

React + Reactstrap + CSS Modules + Webpack

I've been looking how I can combine the following : ReactJS + ReactStrap and CSS-Modules (react-css-modules and/or boostrap-css-modules), however, I can't seem to piece the three modules together to achieve the desired effect (or find any help…
teh0wner
  • 1,393
  • 6
  • 16
  • 33
13
votes
3 answers

Close Modal Popup using Esc key on keyboard

I need to close the modal also using the "ESC" key, at the moment it is closing the "CLOSE" and "CONFIRM" button. i'm using reactstrap, react hooks. keyboard {show} and handleClose it didn't work. Here is the code: const DeleteUserModal = props =>…
Allan Alencar
  • 143
  • 1
  • 1
  • 8
13
votes
2 answers

How to dynamically access nested errors/touched on formik Field

I am trying to create a React component to abstract away creating an Input group for my form. All inputs have the same layout - a Label, with the Input underneath and if errors/info text is present these are displayed under the Input. Previously I…
Braden
  • 680
  • 1
  • 11
  • 26
13
votes
5 answers

Reactstrap Bootstrap Navbar not working in react app

I created a react app with 'create react-app'. I am trying now to add a navbar from Reactstrap. I do copy-paste from Reactstrap (I am adding this as one react component) website: import React from 'react'; import { Collapse, Navbar, …
Talita
  • 805
  • 3
  • 11
  • 31
13
votes
4 answers

Reactstrap tooltip causes an error: The target 'TooltipExample' could not be identified in the dom

I have following the code example regarding tooltips in Reactstrap: constructor(props) { super(props); this.state = { tooltipOpen: true }; } . . . render() { return (

Somewhere in here is a

Poogy
  • 2,597
  • 7
  • 20
  • 35
13
votes
0 answers

Can Material-UI be used with Bootstrap 4

I am planning to build a React app using Bootstrap-4 and reactstrap (for the React Bootstrap 4 components) but I would also like to incorporate Google's material design into my app which reactstrap does not provide. My question is: could I use…
Chris
  • 816
  • 4
  • 11
  • 23
1
2 3
…
51 52