Just started to learn react, and using the mui library.
I installed the MUI library with
npm install #mui/material #emotion/react #emotion/styled
I also installed the roboto font, and the icons.
Then i made a simple app that should just display MUI button.
App.js
import Button from '#mui/material/Button';
function App() {
return (
<div >
<h2>Hello World!</h2>
<Button variant="text">Text</Button>
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>
</div>
);
}
export default App;
Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
The three buttons have been copied directly from the library. When I run the app with npm start the page remains empty. The compilation is successful, there are no errors whatsoever. When i remove the buttons, the <h2> Hello World </h2> suddenly renders. When the buttons are left in the code, even the <h2> title disappears.
Why are the components not rendering?
Found the solution.
In my several attempts to get this to work I created multiple apps. Whenever I created the app using npm create-react-app I would then install the MUI library as described above.
The issue was that I did not cd to the app directory before installing the library. After changing directories the Buttons properly rendered.
I am learning React but getting some error when using bootstrap ListGroup. I have tried searching the same but could not understand the issue why this is happening and how to resolve it.
I have installed npm install react-bootstrap bootstrap as per documentation. It's working fine with form but throwing error with ListGroup.
I have tried this as well import { ListGroup } from 'react-bootstarp';
Can any one tell me why it is throwing this error.
Product List Component:
import React from 'react'
import ListGroup from 'react-bootstarp/ListGroup';
function ProductList() {
return(
<>
<div className="list-container">
<div className="header">
<h3>Products</h3>
</div>
<div class="panel">
<ListGroup>
<ListGroup.Item>Oppo F9 Pro</ListGroup.Item>
<ListGroup.Item>Samsung Galaxy A1</ListGroup.Item>
<ListGroup.Item>Lava Lite Pro</ListGroup.Item>
<ListGroup.Item>Sony Xperia Lite</ListGroup.Item>
<ListGroup.Item>iPhone 13 Pro</ListGroup.Item>
</ListGroup>
</div>
</div>
</>
)
}
export default ProductList;
App.js
import logo from './logo.svg';
import './App.css';
//Custom code
import ProductList from './components/ProductList';
function App() {
return (
<div className="App">
<ProductList/>
</div>
);
}
export default App;
Ref: https://react-bootstrap.github.io/components/list-group/
Module not found error occurs when you are using some module and that module is not installed or the node is unable to locate that module due to the wrong path.
One module you are trying to install has either dependency on other modules as well
so sometimes not all the modules are installed correctly due to some permission security issues.
So please try giving all permission or run as Root and add sudo if you are using an ubuntu machine.
So you can install that module by directly running the following command:-
npm install react-bootstrap-validation --save
or if you are using Linux/ubuntu then run the following command:-
sudo npm install react-bootstrap-validation --save
Or first please check in the console when installing the module that
is there any dependency error showing in the console
if so then please also attach that console, in that case, you need to install the dependent module also as separately via npm install.
Hope this will help!
Thanks
It is a simple program . i am trying to use a material UI search icon . i have installed both material UI core and material UI icons . Im still unable to use them . can someone explain me why.
import React from 'react';
import "../style components/Header.css";
import SearchIcon from '#mui/icons-material/Search';
function Header() {
return (
<div className="Header">
<div className="header_left">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/84/FaceB.png" alt="" />
<SearchIcon/>
<div className="header_input">
<input type="text" />
</div>
</div>
<div className="header_middle"></div>
<div className="header_right"></div>
</div>
)
}
export default Header;
"this is the error"
./src/components/Header.jsx
Module not found: Can't resolve '#mui/icons-material/Search' in 'C:\Users\noushd\Desktop\Clone\facebook-clone\src\components'
The Material UI Icons module is dependant on the Material UI Core to display the icons. So make sure you installed the core module.
These components use the MUI SvgIcon component to render the SVG path for each icon, and so have a peer-dependency on #materialui/core.
https://mui.com/components/icons/#svg-material-icons
And just to add onto what Hamidreza said, you can use spaces in filenames but it's frowned upon as they might be misinterpreted by software that poorly supports them.
I had to install #emotion/react and #emotion/styled to get it working but it used to work without them before .
Solution1:- look at the package.json file material UI version and use the respective material UI.
Solution2:- Install the latest version of Material UI
I have worked with create-react-app repo before. But recently I am using create-next-app repo for server side rendering.
I created a project with npx create-react-app and install a package for example npm install react-burger-menu --save from github and then use it in App.js. everything is working:
import './App.css';
import { slide as Menu } from 'react-burger-menu'
function App() {
var styles = {
...
}
return (
<div className="App">
<Menu styles={styles}>
<a id="home" className="menu-item" href="/">Home</a>
<a id="about" className="menu-item" href="/about">About</a>
<a id="contact" className="menu-item" href="/contact">Contact</a>
<a className="menu-item--small" href="">Settings</a>
</Menu>
</div>
);
}
export default App;
but I use this package in project npx create-next-app:
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.scss'
import {slide as Menu} from "react-burger-menu";
export default function Home() {
var styles = {
...
}
return (
<Menu styles={ styles } >
<a id="home" className="menu-item" href="/">Home</a>
<a id="about" className="menu-item" href="/about">About</a>
<a id="contact" className="menu-item" href="/contact">Contact</a>
<a className="menu-item--small" href="">Settings</a>
</Menu>
);
}
but it creates following error:
Server Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
this error apears almost with every package I install
When you create next app using npx create-next-app it creates your project inside a folder (default my-app). So before installing any package (or init git) you need to run cd my-app (in Git bash terminal) to be in project directory. otherwise it will create a new package.json in the wrong directory.
Whenever I try to use a Font Awesome icon in React's render(), it isn't displayed on the resulting web page although it works in normal HTML.
render: function() {
return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>;
}
Here is an live example: http://jsfiddle.net/pLWS3/
Where is the fault?
If you are new to React JS and using create-react-app cli command to create the application, then run the following NPM command to include the latest version of font-awesome.
npm install --save font-awesome
import font-awesome to your index.js file. Just add below line to your index.js file
import '../node_modules/font-awesome/css/font-awesome.min.css';
or
import 'font-awesome/css/font-awesome.min.css';
Don't forget to use className as attribute
render: function() {
return <div><i className="fa fa-spinner fa-spin">no spinner but why</i></div>;
}
React uses the className attribute, like the DOM.
If you use the development build, and look at the console, there's a warning. You can see this on the jsfiddle.
Warning: Unknown DOM property class. Did you mean className?
https://github.com/FortAwesome/react-fontawesome
install fontawesome & react-fontawesome
$ npm i --save #fortawesome/fontawesome
$ npm i --save #fortawesome/react-fontawesome
$ npm i --save #fortawesome/fontawesome-free-solid
$ npm i --save #fortawesome/fontawesome-free-regular
$ npm i --save #fortawesome/fontawesome-svg-core
then in your component
import React, { Component } from 'react';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faCheckSquare, faCoffee } from '#fortawesome/fontawesome-free-solid'
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<h1>
<FontAwesomeIcon icon={faCoffee} />
</h1>
</div>
);
}
}
export default App;
npm install --save-dev #fortawesome/fontawesome-free
in index.js
import '#fortawesome/fontawesome-free/css/all.min.css';
then use icons like below :
import React, { Component } from "react";
class Like extends Component {
state = {};
render() {
return <i className="fas fa-heart"></i>;
}
}
export default Like;
You can also use the react-fontawesome icon library. Here's the link: react-fontawesome
From the NPM page, just install via npm:
npm install --save react-fontawesome
Require the module:
var FontAwesome = require('react-fontawesome');
And finally, use the <FontAwesome /> component and pass in attributes to specify icon and styling:
var MyComponent = React.createClass({
render: function () {
return (
<FontAwesome
className='super-crazy-colors'
name='rocket'
size='2x'
spin
style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
/>
);
}
});
Don't forget to add the font-awesome CSS to index.html:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
The simplest solution is:
Install:
npm install --save #fortawesome/fontawesome-svg-core
npm install --save #fortawesome/free-solid-svg-icons
npm install --save #fortawesome/react-fontawesome
Import:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faThumbsUp } from '#fortawesome/free-solid-svg-icons';
Use:
<FontAwesomeIcon icon={ faThumbsUp }/>
npm install --save font-awesome
import 'font-awesome/css/font-awesome.min.css';
then
<i className="fa fa-shopping-cart" style={{fontSize:24}}></i>
<span className="badge badge-danger" style={{position:"absolute", right:5, top:5}}>number of items in cart</span>
In case you are looking to include the font awesome library without having to do module imports and npm installs, put this in the head section of your React index.html page:
public/index.html (in head section)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
Then in your component (such as App.js) just use standard font awesome class convention. Just remember to use className instead of class:
<button className='btn'><i className='fa fa-home'></i></button>
You need to install the package first.
npm install --save react-fontawesome
OR
npm i --save #fortawesome/react-fontawesome
Don't forget to use className instead of class.
Later on you need to import them in the file where you wanna use them.
import 'font-awesome/css/font-awesome.min.css'
or
import FontAwesomeIcon from '#fortawesome/react-fontawesome'
After struggling with this for a while I came up with this procedure (based on Font Awesome's documentation here):
As stated, you'll have to install fontawesome, react-fontawesome and fontawesome icons library:
npm i --save #fortawesome/fontawesome-svg-core
npm i --save #fortawesome/free-solid-svg-icons
npm i --save #fortawesome/react-fontawesome
and then import everything to your React app:
import { library } from '#fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faStroopwafel } from '#fortawesome/free-solid-svg-icons'
library.add(faStroopwafel)
Here comes the tricky part:
To change or add icons, you'll have to find the available icons in your node modules library,
i.e.
<your_project_path>\node_modules\#fortawesome\free-solid-svg-icons
Each icon has two relevant files: .js and .d.ts, and the file name indicates the import phrase (pretty obvious...), so adding angry, gem and check-mark icons looks like this:
import { faStroopwafel, faAngry, faGem, faCheckCircle } from '#fortawesome/free-solid-svg-icons'
library.add(faStroopwafel, faAngry, faGem, faCheckCircle)
To use the icons in your React js code, use:
<FontAwesomeIcon icon=icon_name/>
The icon name can be found in the relevant icon's .js file:
e.g. for faCheckCircle look inside faCheckCircle.js for 'iconName' variable:
...
var iconName = 'check-circle';
...
and the React code should look like this:
<FontAwesomeIcon icon=check-circle/>
Goodluck!
as 'Praveen M P' said you can install font-awesome as a package. if you have yarn you can run:
yarn add font-awesome
If you don't have yarn do as Praveen said and do:
npm install --save font-awesome
this will add the package to your projects dependencies and install the package in your node_modules folder. in your App.js file add
import 'font-awesome/css/font-awesome.min.css'
Alexander's answer from above really helped me out!
I was trying to get social accounts icons in the footer of my app I created with ReactJS so that I could easily add a hover state to them while also having them link my social accounts. This is what I ended up having to do:
$ npm i --save #fortawesome/fontawesome-free-brands
Then at the top of my footer component I included this:
import React from 'react';
import './styles/Footer.css';
import FontAwesomeIcon from '#fortawesome/react-fontawesome';
import {faTwitter, faLinkedin, faGithub} from '#fortawesome/fontawesome-free-brands';
My component then looked like this:
<a href='https://github.com/yourusernamehere'>
<FontAwesomeIcon className ='font-awesome' icon={faGithub} />
</a>
Worked like a charm.
Personally, I found react-fontawesome to be unwieldy because of the way it requires each icon to be individually imported. If you would like to use Font Awesome version 5 with React without using react-fontawsome, you can do it as follows:
Download the fontawesome free package from font awesome themselves here: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
Create a directory 'fontawesome' in the 'public' directory of your react app.
Copy the 'css' and 'webfonts' directories from the downloaded zip into this folder.
Add the following line to the 'head' tag of your 'index.html' file:
<link href="%PUBLIC_URL%/fontawesome/css/all.css" rel="stylesheet">
You can now use Font Awesome icons in the usual way:
<i className="fas fa-globe-europe"></i>
I was experienced this case; I need the react/redux site that should be working perfectly in production.
but there was a 'strict mode'; Shouldn't lunch it with these commands.
yarn global add serve
serve -s build
Should working with only click the build/index.html file.
When I used fontawesome with npm font-awesome, it was working in development mode but not working in the 'strict mode'.
Here is my solution:
public/css/font-awesome.min.css
public/fonts/font-awesome.eot
*** other different types of files(4) ***
*** I copied these files for node_module/font-awesome ***
*** after copied then can delete the font-awesome from package.json ***
in public/index.html
<link rel="stylesheet" href="%PUBLIC_URL%/css/font-awesome.min.css">
After all of above steps, the fontawesome works NICELY!!!
If someone wants to do it via the Official documentation. Here is how I did and what I understood.
Install the library as mentioned on font awesome page using npm or yarn for example in general I used these
npm i --save #fortawesome/fontawesome-svg-core
npm install --save #fortawesome/free-solid-svg-icons
npm install --save #fortawesome/react-fontawesome
You need two import library from '#fortawesome/fontawesome-svg-core' if you want to use in general or globally, it provides the access to the icons everywhere in your project.
import { library } from '#fortawesome/fontawesome-svg-core';
To use the icons you need to import them based on the npm or yarn library you have installed. I would recommend importing this in App.js where it will be easily visible. Like If I was using a free-tier shopping cart icon and it was solid you can import like below (if you are not sure if its solid, regular, etc or what library just click on the icon it will list out the different versions and based on the icon you like you can import the library for react).
import { faShoppingCart } from '#fortawesome/free-solid-svg-icons';
for adding the icon name I would recommend writing the import statement and library and then precede with fa and start typing the name it will auto-recommend as soon as you type (checked in VSCode) which will make it less complicated to find.
You need to add the icons in the library for making it accessible globally in your project separated by a comma
library.add( faCheckSquare, faAmbulance, faShoppingCart);
After which you can import the following component
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
and use it like below wherever you need the icon. For the name, it's the same as listed on the style class on the FontAwesome site, for the icons. eg: shopping cart is listed as shopping-cart
<FontAwesomeIcon icon="shopping-cart" />
It should work now after this.
Checkout react icons pretty dope and worked well.
In my case I was following the documentation for react-fontawesome package, but they aren't clear about how to call the icon when setting the icons into the library
this is was what I was doing:
App.js file
import {faCoffee} from "#fortawesome/pro-light-svg-icons";
library.add(faSearch, faFileSearch, faCoffee);
Component file
<FontAwesomeIcon icon={"coffee"} />
But I was getting this error
Then I added the alias when passing the icon prop like:
<FontAwesomeIcon icon={["fal", "coffee"]} />
And it is working, you can find the prefix value in the icon.js file, in my case was: faCoffee.js
For Font Awesome v6.x.x
Fontawesome provides three ways to use its icons.
After considering ease of usage and bundle size. The below method looks best.
yarn add #fortawesome/fontawesome-svg-core
# free icons styles
yarn add #fortawesome/free-solid-svg-icons
yarn add #fortawesome/free-regular-svg-icons
yarn add #fortawesome/react-fontawesome#latest
import icons that you want.
import { faClipboard } from "#fortawesome/free-solid-svg-icons";
import { faClipboard as farClipboard } from "#fortawesome/free-regular-svg-icons";
Note: if you need a Solid icon you need to import it from #fortawesome/free-solid-svg-icons and if you need a Regular icon you need to import it from #fortawesome/free-regular-svg-icons
Prefix regular icons with far instead of fa as a convention
Usage:
<p>
This is a free Solid Icon <FontAwesomeIcon icon={faClipboard} />
</p>
<p>
This is a free Regular Icon <FontAwesomeIcon icon={farClipboard} />
</p>
Note:
As you search for icons in Fontawesome documentation and copy the code you will get something as below. However, you need to change the icon prop to the above-mentioned value for the icon to display.
<FontAwesomeIcon icon="fa-solid fa-clipboard" />
Here is the CodeSandbox for the above-mentioned snippets.
Refer to official Docs for more info.
PS: You can only use Free Solid, and Free Regular icons under the free plan.
Here is the list of icons that are available under free plan.