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
Related
I my react app, I am using react markdown for rendering the blog content. How can we add multiple classes to the ReactMarkdown. At the moment I have used dataArea class alone, but i would need to use below classes for styling purpose. Could someone please advise ?
.blogImageSection
.dataArea
.dataDate
.tags
.readmoreLink
.dataArea p
. views
csb link for reference : https://codesandbox.io/s/great-bardeen-9lsog5?file=/src/App.js
// react markdown usage:
{ popularResults.map (({id, blogdetails, tags, createdAt }) => (
<ReactMarkdown className='dataArea' remarkPlugins={[remarkGfm]}>{blogdetails}
</ReactMarkdown>
))}
This is the normal blog where I have used the above classes without using react markdown
<a key={id} href="my url">
<div key={id} className='blogImageSection'>
<img alt="id" src={photo} />
<div key={id} className='dataArea'>
<span key={id} className='dataDate'>{date}</span>
<span className='tags'>cypress</span>
<h3>{heading}</h3>
<p>
Best heading added here.
The most relevant data added here.
Greatest of all time. Print the whole text here.
Ideas are always usefull....
</p>
<a href="_blank" className="readmoreLink">
Read more →
</a>
<span className='views'>
{topViews > 999 ? (topViews / 1000).toFixed(2) + "K" : topViews}
</span>
</div>
</div>
</a>
you can add all classes like this:
className='dataArea blogImageSection dataArea dataDate tags readmoreLink dataArea views'
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>
)
}
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
I have created Card component using .jsx file and loaded in a .js file. And it is working. Here I want to know, how to add social media icons to the card?
This is for a new React project, hope to run mongodb. I have tried using this
npm install -g bower
bower install bootstrap-social.
But did not work.
const Card = props=>{
return(
<div className="card text-center shadow">
<div className="overflow">
<img src={props.imgsrc} alt='image 1' className="card-img-top" />
</div>
<div className="card-body text-dark">
<h4 className="card-title">{props.title} </h4>
<p className="card-text text-secondary">
Lorem ipsum dolor sit amet consectetur,
</p>
**Go Anywhere**
</div>
</div>
);
};
I expected to change above "Go Anywhere" button to twitter button. And to put some other buttons like Facebook, Instagram and so on in the same row.
you can use React Iconsenter code here
it comprises of a bunch of icons from font-awesome, material design etc
npm install react-icons
OR
yarn add react-icons
then import your favourite icons e.g
import {FaTwitter} from 'react-icons/fa'
you can browse a bunch of several icons at:
https://react-icons.github.io/react-icons/
You can install any icon library having social icons. You need to do:
npm install react-feather --save( run from the project folder )
import { IconName } from 'react-feather';
Link for react-feather: https://github.com/feathericons/react-feather
Hope this helps!
you can use webpack-webfont and convert svg custom icons to webfont
you can download icons from flaticon.com
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...