I am learning react.js and I need to make my app responsive. What should I use? Bootstrap or react-bootstrap? Can I use Bootstrap in react? Or I need to use react-bootstrap? What's the difference
react-bootstrap is a UI library of components similar to material-ui or a lot other UI libraries, while Bootstrap alone is a collection of CSS classes + HTML UI components.
You are free to choose between them, react-bootstrap or Bootstrap by your choice.
You can read more about them here
Bootstrap:
import * as React from 'react';
function Example() {
return (
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<strong>Oh snap! You got an error!</strong>
<p>
Change this and that and try again.
</p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
)
}
React-Bootstrap:
import * as React from 'react';
import Alert from 'react-bootstrap/Alert';
function Example() {
return (
<Alert dismissible variant="danger">
<Alert.Heading>Oh snap! You got an error!</Alert.Heading>
<p>
Change this and that and try again.
</p>
</Alert>
)
}
Related
I am trying to add the google material design icon in my one of the react component.
The following is the code snippet
const socialMedia = (
<div className="columns is-centered footer-colmns sub-footer">
<div className="column is-one-quarter">
<h1>Wir sind auf diesen Kanälen vertreten</h1>
<span>
{"Youtube Icon"},
{/MenuIcon},
{" | "}
</span>
<span>
{"Facebook Icon"},
{" | "}
</span>
<span>
<span>
{"XING Icon"},
{" | "}
</span>
</span>
</div>
</div>
);
Try installing the following package:
// with npm
npm install #material-ui/icons
// with yarn
yarn add #material-ui/icons
Then import the icons:
import { Facebook, YouTube } from '#material-ui/icons';
Next, replace the following line of your code
<span>
{"Youtube Icon"},
{/MenuIcon},
{" | "}
</span>
with
<span>
<YouTube/>,
... //rest of the icons
</span>
Replace the rest in a similar fashion
there is no need to write the icons in curly brasis.. just write down as a tag like
<YouTube/>
<Facebook/>
<XING/>
Good Luck..
Note: Please don;t forget to install and import material UI Icons library
I am trying to refactor from class based to functional. While doing so I will need to use hooks instead of setting this.state etc.. I am trying to get a FORM to open when i click a button. The button will also change from "add reply" to "submit comment" once the form opens. I am stumped. This is the best thing I could come up with... Doesnt work. in fact, it makes my "add reply" button completely disappear. Any thoughts on this? Here is the code that I have written. inside of the comment I am trying to return a component using ternary....
image of component as-is
import React, {useState} from 'react';
import FormOpen from './FormOpen';
const CommentCreated = (props) => {
const [resource, setResource] = useState([{visible: false, addReply: 'Add Reply'}]);
return (
<div className="ui threaded comments">
<h3 className="ui dividing header">Comments</h3>
<div className="comment">
<a href="/" className="avatar">
<img alt="avatar" src= {props.avatar} />
</a>
<div className="content">
<a href="/" className="author">{props.author}
</a>
<div className="metadata">
<span className="date">Today at 5:42PM</span>
</div>
<div className="text">{props.content}
</div>
<div className="actions">
{resource.visible ? <FormOpen /> : null}
<a className="reply" onClick={() => {setResource([{visible: true, addReply: 'Submit Comment'}]);}}>{resource.addReply}
</a>
<a className="save">Save</a>
<a className="hide">Hide</a>
</div>
</div>
</div>
</div>
);
};
export default CommentCreated;
You should replace the setResource(['Submit Comment', true]) with :
setResource([{
visible: true,
addReply: 'Submit Comment'
}])
To match the shape of your state.
EDIT:
Here is a working example based on your code.
As I can see from your example, your resource state doesn't need to be an array but simply an object.
Furthermore, as you are using hyperlinks <a />, you must use preventDefault() on your event being triggered if you don't want the page to refresh.
I have a business need which is as shown below
here i have used DropdownButton from react bootstrap to achive the above menu
<span className="widget-controls" mr-eye-widget-type='Menu'>
<DropdownButton
alignRight
drop='down'
title="" className="download-CSV-button fa fa-ellipsis-v ">
<Dropdown.Item>Testttt</Dropdown.Item>
<Dropdown.Item>
<CSVLink { ... switchRef } data={this.state.downloadData} asyncOnClick={true} headers={this.state.dowloadHeader} filename={this.state.downloaFileName}>
<span className="csv-download" mr-eye-widget-type='DownloadButton' >
<div className="fa fa-download listColor" >
<span className="download-text">{widgetLabelConfig.englishConfig.Resource_Download_as_CSV}
</span></div>
</span>
</CSVLink>
</Dropdown.Item>
</DropdownButton>
</span>
and also here in the code one of the menu item is Testttt which is displaying where as second menu item has CSVLink which is a npm react-csv module for download this will not be render in the dom when i put it outside drop menu it works fine please let me know why is it failing when it is inside DropdownButton
Trying to have a modal come in from Materialize-css that i get from that npm but nothing is showing up. I am using React with React Router v4 as well
I currently have it set up in my nav bar and the search-bar changes with the #modal1 identifier but the modal doesn't pop up. I would really like to avoid hacky things like have a line or two of jQuery in componentDidMount just for this because if thats the only solution I'll just go back to bootstrap.
I'm trying it with the code straight from the Docs. Please help!
<div className='container'>
<div id="modalHere" className="modal">
<div className="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div className="modal-footer">
Agree
</div>
</div>
<nav>
<div className="nav-wrapper blue-grey lighten-2">
<Link to='/professionals' className="brand-logo right"><img src={pegasusIcon} alt='OurTelos logo' className="OurTelosNavbarLogo"/></Link>
<ul id="nav-mobile" className="left">
<li><Link to="/professionals/sessions">Sessions</Link></li>
<li><a className="waves-effect waves-light btn modal-trigger" href="#modalHere">Modal</a></li>
</ul>
</div>
</nav>
</div>
EDIT
I added the jquery in my index file for the modal in a script tag and my modal does pop up but not properly. Take a look. Also if I use the example with the Fixed-Footer things seem to come out and work just fine.....why
EDIT 2
Now I am having an issue that the same modals from a single exported react component will no longer show after the page has been changed by react router...
I am new to React and am trying to get up to speed on a few basic concepts, trying to shoehorn it into an existing application (with the intention of slowly converting the entire app into React). So this may be a vary basic question.
I am converting my dialogs first (my app has a bunch of bootstrap modal dialogs), so I am using react-modal library to create these dialogs. What I would like to do is make the outer markup for this dialog reusable across all my dialogs. For instance, with this render method:
render() {
return(
<Modal
className="Modal__Bootstrap modal-dialog"
closeTimeoutMS={150}
isOpen={this.state.modalIsOpen}
onRequestClose={this.handleModalCloseRequest}
>
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" onClick={this.handleModalCloseRequest}>
<span aria-hidden="true">×</span>
<span className="sr-only">Close</span>
</button>
*******INSERT HEADER COMPONENT*******
</div>
<div className="modal-body">
*******INSERT BODY COMPONENT*******
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" onClick={this.handleModalCloseRequest}>Cancel</button>
*******INSERT ADDITIONAL FOOTER BUTTONS COMPONENT*******
</div>
</div>
</Modal>
);
}
I would like to have the lines that start with the ******** to be variable components that are appropriate (and different) for each dialog.
Obviously, for each dialog, I could just copy and paste this render method into that dialog's class and have hard coded components for that dialog. Something like (for the body):
<div className="modal-body">
<DialogABody />
</div>
and:
<div className="modal-body">
<DialogBBody />
</div>
But if I do that, I am then duplicating all the markup for the dialog "chrome" in react.
Essentially, I need some sort of dynamic component?
Is this possible?
on your modal react class you want to do this
class Modal extends React.Component {
render() {
return (
<div>
{this.props.header ? <HeaderComponent text={this.props.header} /> : null }
{this.props.children}
{this.props.footer ? <FooterComponent text={this.props.footer} /> : null }
</div>
}
}
then when calling this pass your props
<Modal
className="Modal__Bootstrap modal-dialog"
closeTimeoutMS={150}
isOpen={this.state.modalIsOpen}
onRequestClose={this.handleModalCloseRequest}
header="My Header"
footer="My Footer"
>
as for the body component part you should pass that as a prop to this dialog class when calling it.
instead of this:
<div className="modal-body">
<DialogABody />
</div>
you should have this:
<div className="modal-body">
{this.props.dialogComponent}
</div>
which gets passed through on the parent to this class
Call your model dialog with the wanted components as props.
<model header={headerComponent} body={bodyComponent}/>
In model render just put {this.props.header} and so on.
for one child component you could simply use this.props.children, however, as you have 3 components, you need to put them into separate props:
<DialogBody header={<div>header</div>} body={<div>body</div>} footer={<div>footer</div>}/>