Currently working on a group project for class. It's using React and MaterializeCss on the front.
I'm trying to add icons, for example, on the login screen I have a little person icon next to the username input field, but it just displays "ACCOUNT_USER" or on the send button, I want to show an icon called send but it just displays "SEND". Here's a code example.
<div className="row">
<div className="input-field col s6 offset-m3">
<i className="material-icons prefix">account_circle</i>
<input id="username" type="text" className="validate" />
<label htmlFor="username">Username</label>
</div>
Before anyone tells me to use include the CDN line from https://materializecss.com/getting-started.html , I already have.
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
Does anyone have any idea what could be the problem then? The program currently runs locally hosted, and I read that could be a problem with materialize, and the only apparent solution I found so far is to download the icons package from google, but that would be silly to download 91k icon files for a program no? Hopefully there's a better solution
How to use materialize-css with React with icons and other js features
yarn add materialize-css#next --save or npm install materialize-css#next --save
yarn add install material-icons or npm install material-icons
3.Kindly import the following like this ; snap
import 'materialize-css/dist/css/materialize.min.css';
import 'materialize-css/dist/js/materialize';
import 'material-icons/iconfont/material-icons.css'
Related
I'm using a basic React installation on Laravel 5.8. My blade hoolaMundo.blade.php identifies the file css/app.css and js/app.js, but it doesn't show anything in the browser.
holaMundo
<html>
<head>
<link href="/css/app.css" rel="stylesheet">
</head>
<body>
<div id="Example"></div>
</body>
</html>
<script src="/js/app.js"></script>
Component
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Main from "../../assets/js/components/Example";
class Example extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">Example Component</div>
<div className="card-body">I'm an example component!</div>
</div>
</div>
</div>
</div>
);
}
}
export default Example;
if (document.getElementById('Example')) {
ReactDOM.render(<Example />, document.getElementById('Example'));
}
Web Result
extra information
node -v :14.7.0
php -v : 7.3.5
npm -v: 4.14.7
Done
npm install
npm dev run
I would usually use the comment section, due to my insufficent reputation I'll need to type a big answere.
thing, it would be greate to see your mix file? Did you use .react? https://laravel.com/docs/5.8/mix#react
Laravel does sometimes behave odd, no ofense I love it, but I would recommend using the asset function to refrence your styles scripts etc. Then you make sure everything is send out properly.
I would put the script tag within the html tag.
it would be great to know how you installed react? Did you use larvel or node way?
How I do it.
I usually cd into my resource/js folder and install it via
npm i create-react-app myapp
Then I go into laravel mix and paste in:
.react('resources/js/myapp/index.js', 'public/js/myapp.js');
If you cannot run npm i create-react-app myapp then yoou need to install it first. Checkout here: https://www.npmjs.com/package/create-react-app
How to create link with preventDefault and on click it must run download file from external url in React
return (
<Link to="/page">
<img src={src} />
<a href="https://external_photo_uri/pic.jpg" download />
</Link>
)
You can create a normal anchor tag with download attribute.
Example
<a href="myurl" download> <img src={src} /></a>
You can use react-download-link
A simple component to download data from a client-side cache (e.g. flux, redux). Design to be used with browserify or webpack.
Install with:
npm install --save react-download-link
Include with:
import DownloadLink from "react-download-link";
Use:
<DownloadLink
filename="myfile.txt"
exportFile={() => "My cached data"}
>
Save to disk
</DownloadLink>
Or with Promises:
<DownloadLink
filename="myfile.txt"
exportFile={() => Promise.resolve("My cached data")}>
Save to disk
</DownloadLink>
The component will default to an anchor tag, but the tagName prop will accept a string of any other HTML tag you prefer, such as 'button'.
I solved this problem. I create parent div on anchor tag and onClick run e.stopPropagation()
Please try with this one.
<!DOCTYPE html>
<html>
<body>
<p>Click on the w3schools logo to download the image:<p>
<a href="/images/myw3schoolsimage.jpg" download>
<img src="/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
</a>
<p><b>Note:</b> The download attribute is not supported in Edge version 12, IE, Safari 10 (and earlier), or Opera version 12 (and earlier).</p>
</body>
</html>
Reference: https://www.w3schools.com/tags/att_download.asp
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
I'm very new to reactjs. There is a third-party library called react-bootstrap that I want to use in my project. I installed it via yarn and when I want to use it's components, nothing happens! For example:
import { Button } from 'react-bootstrap'
<Button variant="success">Sign In</Button>
has no effect on a button. In elements I can see that the class assigned:
<button type="button" class="btn btn-success">Sign In</button>
but there isn't any effect in button!! What should I do?
If you need any clarification, simply ask for it. Thank you!
You need to add bootstrap.css, either by adding link in index.html
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
or by importing in index.js file after installing bootstrap using yarn / npm.
import 'bootstrap/dist/css/bootstrap.min.css';
Demo
Can not find a clear way to use Bootstrap with Meteor-React combination. There are a number of packages in Atmosphere which expected to exposure global variable with consequent references to Bootstrap functionality, but after, for example,
meteor add universe:react-bootstrap
import BS from 'bootstrap';
system complaints that 'bootstrap' is not defined.
What I did now, I included CDNs for Bootstrap nd jQuery directly into my client's main.html, and got it working:
render() {
return (
<li>
{this.props.ad.text}
<button type="button" className="btn btn-default btn-lg">
<span className="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
</li>
);
}
But it is not seems a good solution. jQuery is included in Meteor app by default, how to reference it? When I tried to add twbs:bootstrap package, it is also not clear how to include it in html. Simply added, it does not work.
To use React with Bootstrap, you should use this module react-bootstrap. It has been out there for sometimes and seems still good. I use it for some of my Meteor React projects, I have nothing to complain till now.