During the development of my next React app, I had to use a modal component from react-bootstrap. It's actually working fine, but it looks like there are no stylesheets imported?
Here is my code
import React from "react";
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
class Nav extends React.Component {
constructor(props, context) {
super(props, context);
this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this);
this.state = {
show: false,
};
}
handleClose() {
this.setState({ show: false });
}
handleShow() {
this.setState({ show: true });
}
render() {
return (
<>
<nav>
<h5>a pack of free css animations</h5>
<ul>
<li><button variant="primary" onClick={this.handleShow}>how to use ></button></li>
<li>
<form method="get" action="file">
<button type="submit">download ></button>
</form>
</li>
<li>see on github ></li>
</ul>
</nav>
<Modal
show={this.state.show}
onHide={this.handleClose}
aria-labelledby="ModalHeader"
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">How to use?</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Once you downloaded <i>animation.min.css</i>, you have to link that to your project.<br />
To do that, use a 'link' tag, or just copy code of animation you like.</p>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
</>
);
}
}
export default Nav;
And it looks like that (Chrome)
Click me
Modal is displayed on bottom, text is not centered etc...
What do you think?
How to improve that?
Load the style from react-bootstrap, like below:
https://react-bootstrap.github.io/getting-started/introduction/
You are missing the stylesheet from react-bootstrap which is why the model is not getting styled properly. Add following to your html and it should work.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"
/>
Please go through the link to integrate your app and use with react-bootstrap.
Related
I'm trying to make a login page , which would let me access me to the main site with displays a NavBar. I'm using ReactStrap, and I can't find the way of making the NavBar vertical instead of horizontal, neither setting the background and text colours and images. I could achieve to make a conditional rendering (to let administrator users to access some funcionalities like adding products, other users, and make puchrases, while sellers users are only allowed to make sales and view the sales registers).
Here's my code:
App.js:
import React from 'react';
import "./bootstrap.app.css";
import { BrowserRouter as Router, Route} from "react-router-dom";
import Example from "./componentes/navbar.componente"
import RegistroVentas from "./componentes/registro-ventas.componente";
import EditarVenta from "./componentes/editar-venta.componente";
import VenderProducto from "./componentes/realizar-venta.componente";
import NuevoUsuario from "./componentes/nuevo-usuario.componente";
import NuevoProducto from "./componentes/nuevo-producto.componente";
import ComprarProducto from "./componentes/realizar-compra.componente";
function App() {
return (
<Router>
<div className="container">
<Example />
<br/>
<Route path="/" exact component={RegistroVentas} />
<Route path="/registroVentas" component={RegistroVentas} />
<Route path="/editar/:id" component={EditarVenta} />
<Route path="/venta" component={VenderProducto} />
<Route path="/nuevoUsuario" component={NuevoUsuario} />
<Route path="/nuevoProducto" component={NuevoProducto} />
<Route path="/compra" component={ComprarProducto} />
</div>
</Router>
);
}
export default App;
navbar.js:
import React from 'react';
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
Badge,
NavItem,
NavLink,
UncontrolledDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem } from 'reactstrap';
//import FontAwesome from '#fortawesome/react-fontawesome';
//import 'Ventas' from './ventas-cod'
class Ventas extends React.Component {
render() {
return(
<NavItem>
<NavLink href="/venta">
<Badge pill color="dark">Venta</Badge>
</NavLink>
</NavItem>
);
}
}
class Compra extends React.Component {
render() {
return(
<NavItem>
<NavLink href="/compra">
<Badge pill color="dark">Compra</Badge>
</NavLink>
</NavItem>
);
}
}
class Altas extends React.Component {
render () {
return(
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
<Badge pill color="dark">Altas</Badge>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>
<NavLink href="/nuevoUsuario">
<Badge pill color="dark">Usuario</Badge>
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink href="/nuevoProducto">
<Badge pill color="dark">Producto</Badge>
</NavLink>
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
Reset
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
);
}
}
export default class Example extends React.Component {
constructor(props) {
super(props);
this.tipoUsuario='administrador';
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false
};
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
render() {
return (
<div>
<Navbar color="green" expand="lg">
<NavbarBrand href="/">Supermercado Caplan</NavbarBrand>
<NavbarToggler vertical className="d-flex" onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="d-flex ml-auto" >
<Ventas />
{this.tipoUsuario=='administrador' ?
<Compra /> : <a></a>
}
{this.tipoUsuario=='administrador' ?
<Altas /> : <a></a>
}
</Nav>
</Collapse>
</Navbar>
</div>lt
);
}
}
Here's what I'm getting:
Here's something I would like to get:
Does anyone have an idea of what should I do?
Thank's a lot!
In Reactstrap, there's no such a thing like a native component called Sidebar.
However, it's possible to download a template with a sidebar implemented, and then wrap the whole application into it.
For the login cuestion, there's a lot of examples on the web. While all of them should work correctly if implemented properly, I've chosen one of the simplest I found, which works fine for the kind of project I'm doing. However, while it allows me to login with my credentials into a local deployment, it isn't probably the best solution for an application deployed into a web service, since the security of the system it's not just a big deal for an app which is running into a local machine, just written for academic purposes.
So then, here's the template I've found for the Reactstrap sidebar and the login method in which I've based on to implement in my app, and also my app with both things implemented.
Sidebar template:
https://codesandbox.io/s/5ku6t
Login method used:
https://contactmentor.com/login-form-react-js-code/
App with login and sidebar implemented:
https://gitlab.com/leandrocaplan/supermercado-caplan-final-programacion-iii-inspt-utn
(See the frontend folder to see the implementation)
Notice that in my app, the way I've found to format the sidebar, and also the topbar, is creating my own CSS classes, and apply them into the sidebar and topbar components. These classes are found in the App.css file at the correspondent frontend directory.
I'm trying to add a antd modal with drag&drop features.
import React, { Component } from "react";
import Draggable from "react-draggable";
import { Modal } from 'antd';
import 'antd/dist/antd.css';
export default class App extends Component {
state = {
disabled: false
};
render = () => {
const { disabled } = this.state;
return (
<div className="container">
<Modal visible>
<Draggable>
<div>
<h4 style={{ height: 20, userSelect: "none" }}>
{"Drag Me"}
</h4>
<textarea disabled={!disabled} className="uk-textarea" />
<br />
</div>
</Draggable>
</Modal>
</div>
);
};
}
Here's my sanbox code https://codesandbox.io/s/small-currying-j3emq, but it seems that react-draggable in ant modal element doesn't work, probably if I can set the element "ant-modal-content" as draggable element this works.
Does anyone know if it is possible to put the draggable element via props in react-draggable?
I am also available to change the package for drag & drop, I just need to be able to drag a antd modal
Just place your <Draggable> inside your <Modal> and not the opposite
return (
<div className="container">
<Modal visible>
<Draggable>
<div>
<h4 style={{ height: 20, userSelect: "none" }}>{"Drag Me"}</h4>
<textarea disabled={!disabled} className="uk-textarea" />
<br />
</div>
</Draggable>
</Modal>
</div>
);
I have a exercise I am working on/attempting to replicate and I am trying to add a modal button to the file. I have the button and the modal from React Bootstrap, however, I am unable to get the actual modal to show up. I was using the documentation from React-Bootstrap but getting the actual modal to come up is not working, I have tried to import the various modals but to no avail, am I missing something in my code?
import React from 'react';
import { Modal, Form, FormControl, Button, ButtonToolbar, InputGroup } from 'react-bootstrap';
import { connect } from 'react-redux';
import { addItem } from '../actions/itemActions';
function ItemModal(props) {
return (
<div>
<Button
variant="dark"
style={{marginBottom: '2em'}}
>Add Item
</Button>
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Add to Shopping List
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Label for="item">Item</Form.Label>
<InputGroup className="mb-3">
<FormControl
type="text"
name="name"
id="item"
aria-label="Add Shopping Item"
aria-describedby="basic-addon2"
/>
<InputGroup.Append>
<Button onClick={props.onHide} variant="outline-dark">Add</Button>
</InputGroup.Append>
</InputGroup>
</Form>
</Modal.Body>
</Modal>
</div>
);
}
function App() {
const [modalShow, setModalShow] = React.useState(false);
return (
<ButtonToolbar>
<Button variant="dark" onClick={() => setModalShow(true)}>
Add Item
</Button>
<ItemModal
show={modalShow}
onHide={() => setModalShow(false)}
/>
</ButtonToolbar>
);
}
export default connect()(ItemModal);
I do have this extra bit of code that I though would function to open the modal but I don't think it works with this version of Bootstrap?
state = {
modal: false,
name: ''
}
toggle = () => {
this.setState({
modal: !this.state.modal
});
};
onChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
}
From your code snippet, I found an issue.
You have 2 component's in a single file, App and ItemModal. From which App component is your base / parent component and ItemModal is your child component.
But you are exporting child compoennt,
export default connect()(ItemModal);
You should export the parent component,
export default connect()(App);
How can I make a Material UI react Button component act as a Link component from react-router-dom without losing it's original style? Like changing the route on click.
import Button from '#material-ui/core/Button';
<Button variant="contained" color="primary">
About Page
</Button>
To something like this, but maintaining the original Button style:
import Button from '#material-ui/core/Button';
import { Link } from 'react-router-dom';
<Button variant="contained" color="primary">
<Link to="/about">
About Page
</Link>
</Button>
Okay, this is very easy, I don't know why it was not working with me:
Just do like this:
import Button from '#material-ui/core/Button';
import { Link } from 'react-router-dom';
<Button component={Link} to="/about" variant="contained" color="primary">
About Page
</Button>
You can find more details at https://mui.com/material-ui/guides/routing/.
MUI 5 has simplified this even further. Simply provide a MUI Button with a href attribute as follows:
import Button from '#mui/material/Button';
<Button href="/" variant="contained">
Link
</Button>
You need to wrap the <Button /> inside the <Link /> component.
import Button from '#material-ui/core/Button';
import { Link } from 'react-router-dom';
const ButtonWithLink = () => (
<Link to="/about">
<Button variant="contained" color="primary">
About Page
</Button>
</Link>
)
You way worked for me
import Button from '#material-ui/core/Button';
import { useHistory } from 'react-router-dom';
const YourComponentName = () =>{
const history = useHistory();
const handleRoutes = (path) =>{
history.push(path)
}
return(
<>
...
<Button
variant="contained"
color="primary"
onClick={() => handleRoutes('/about')}>
About Page
</Button>
...
</>
)
}
Im following this tutorial on bootstrap modal for react. This is the code i have:
import React, { Component } from 'react';
import { Modal } from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import { Popover } from 'react-bootstrap';
import { OverlayTrigger } from 'react-bootstrap';
import { Tooltip } from 'react-bootstrap';
class Login extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
show: false
};
this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this);
}
handleClose() {
this.setState({ show: false });
}
handleShow() {
console.log("Show")
this.setState({ show: true });
}
render() {
const popover = (
<Popover id="modal-popover" title="popover">
very popover. such engagement
</Popover>
);
const tooltip = <Tooltip id="modal-tooltip">wow.</Tooltip>;
return (
<div>
<p>Click to get the full Modal experience!</p>
<Button bsStyle="primary" bsSize="large" onClick={this.handleShow}>
Launch demo modal
</Button>
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Text in a modal</h4>
<p>
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
</p>
<h4>Popover in a modal</h4>
<p>
there is a{' '}
<OverlayTrigger overlay={popover}>
popover
</OverlayTrigger>{' '}
here
</p>
<h4>Tooltips in a modal</h4>
<p>
there is a{' '}
<OverlayTrigger overlay={tooltip}>
tooltip
</OverlayTrigger>{' '}
here
</p>
<hr />
<h4>Overflowing text to show scroll behavior</h4>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.handleClose}>Close</Button>
</Modal.Footer>
</Modal>
</div>
);
}
}
export default Login;
My issue is that when i click on the "Launch demo modal" - button the modal is not shown. I checked to see in the console if the boolean value for "show" is set to true when clicking which it is but somehow the modal is not shown anyway.
This is the entry-point for the application:
import Login from './Components/Modal/Login';
class App extends Component {
render() {
return (
<div className="App">
<Login/>
</div>
);
}
}
export default App;
I have tried to figure it out for hours now but i have no idea. I even used the exact same code as the tutorial at one point but with no luck. Any help is appretiated.
You forgot to add style.css files. add below links to your index.html file .
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
EDIT 1:
or without CDN (on your index.html)
import 'bootstrap/dist/css/bootstrap.css';
It may be useful to take a look at Conditional Rendering With React
:-)
render () {
return (
<div>
{this.state.show ? /*Your component*/ : null /*Or another component*/}
</div>
)
}
side note : Taking this approach means that your Modal component is not instantiated in the first place is this.state.show is false which could be beneficial application speed.
If you pass a show prop into your Modal this implies the Modal is being instantiated and some un needed logic is being applied whithin.
You can show modal using && operator with state like below. I have removed show prop to modal. Try below approach it will work
{this.state.show && (
<Modal onHide={this.handleClose}>
...... // place remaining code here
</Modal>
)}