Adding Font Awesome Pro to React App - getting started - reactjs

I'm trying to add Fontawesome pro to my react app.
I've tried almost all of the options on the getting started tab for Font Awesome - and all that is producing is the free brands. So - now I have a mash up of attempts and and currently stuck on following the instructions set out by clodal in this post
I have a package.json with the following dependencies:
"#fortawesome/fontawesome-svg-core": "^1.2.8",
"#fortawesome/pro-light-svg-icons": "^5.5.0",
"#fortawesome/free-solid-svg-icons": "^5.5.0",
"#fortawesome/pro-regular-svg-icons": "^5.5.0",
"#fortawesome/pro-solid-svg-icons": "^5.5.0",
"#fortawesome/react-fontawesome": "^0.1.3",
I have seen this post and note others are struggling to figure out how to get started with font awesome.
I have added global config auth token to my app.
I have read the upgrading instructions here.
Currently - i'm getting an error that says:
Error: Can't resolve '#fortawesome/pro-brands-svg-icons' in '/Users/18/src/routes/How/components/HowPage'
In that page, I have:
import React from 'react'
import PropTypes from 'prop-types'
import classes from './HowPage.scss'
import GridContainer from "components/Grid/GridContainer.jsx";
import GridItem from "components/Grid/GridItem.jsx";
import Clearfix from "components/Clearfix/Clearfix.jsx";
import { library } from '#fortawesome/fontawesome-svg-core'
import { fas } from '#fortawesome/pro-solid-svg-icons'
import { faTwitter } from '#fortawesome/pro-brands-svg-icons'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
export const HowPage = ({ how }) => (
<div className={classes.container}>
<h1 style={headstyle}>How it Works</h1>
<GridContainer justify="center">
<GridItem
xs={12}
sm={8}
md={8}
className={`${classes.mlAuto} ${classes.mrAuto} ${
classes.textCenter
}`}
>
<span>
<i className="fas fa-layer-plus"></i>
</span>
<i className="fal fa-stroopwafel"></i>
<FontAwesomeIcon icon="coffee" />
<i className="fab fa-twitter" />
</GridItem>
</GridContainer>
<pre>{JSON.stringify(how, null, 2)}</pre>
</div>
)
HowPage.propTypes = {
how: PropTypes.object // from enhancer (firestoreConnect + connect)
}
export default HowPage
In my index.html I have:
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
I have tried adding these import statements to the page on which Im trying to use the fonts (I can't understand the library building instructions).
That produces the errors (expected, given the next issue):
I don't know where to add the following library add call:
library.add(fas, faTwitter)
My app gets initialised via main.js. That page has:
import React from 'react'
import ReactDOM from 'react-dom'
import createStore from './store/createStore'
import { initScripts } from 'utils'
import { version } from '../package.json'
import { env } from './config'
import './styles/core.scss'
// import { library } from '#fortawesome/fontawesome-svg-core'
// import { fal } from '#fortawesome/pro-light-svg-icons'
// Window Variables
// ------------------------------------
window.version = version
window.env = env
initScripts()
// Store Initialization
// ------------------------------------
const initialState = window.___INITIAL_STATE__ || {
firebase: { authError: null }
}
const store = createStore(initialState)
// Render Setup
// ------------------------------------
const MOUNT_NODE = document.getElementById('root')
let render = () => {
const App = require('./containers/App').default
const routes = require('./routes/index').default(store)
ReactDOM.render(<App store={store} routes={routes} />, MOUNT_NODE)
}
// Development Tools
// ------------------------------------
if (__DEV__) {
if (module.hot) {
const renderApp = render
const renderError = error => {
const RedBox = require('redbox-react').default
ReactDOM.render(<RedBox error={error} />, MOUNT_NODE)
}
render = () => {
try {
renderApp()
} catch (e) {
console.error(e) // eslint-disable-line no-console
renderError(e)
}
}
// Setup hot module replacement
module.hot.accept(['./containers/App', './routes/index'], () =>
setImmediate(() => {
ReactDOM.unmountComponentAtNode(MOUNT_NODE)
render()
})
)
}
}
// Let's Go!
// ------------------------------------
if (!__TEST__) render()
I think the instructions want me to write that library add call in there - but I can't understand how to do it.
I have seen this post - this user has figured out how to add code to the app.js file. I think I am stuck on this step. My app.js is in main.js - I don't know where to put the library call and I don't know whether this example means that the user will only have access to the 2 icons named in that post (faSpinnerThird, faCircle).
I am using Material-UI - and can see that it contemplates the use of font awesome icons. I just can't figure out how to set it up.
PS: the contributing guidelines on the GitHub support page ask for questions to be tagged with react-fontawesome. There isn't a tag for that reference - I don't have enough points to create one - maybe someone who does can sort that out.

For others struggling with FA in React - PKK's answer on this post helped me How to integrate FontAwesome 5 Pro with React?
However, it doesn't seem to work with 2 word icon names. But - at least it works for many icons. I always thought of FA as plug and play - this has been many hours in figuring out how to get it to work.

According to the "importing icons" documentation, there is no #fortawesome/pro-brands-svg-icons. There is only #fortawesome/free-brands-svg-icons.

Related

Trying to add anime.js in react but not working

I am trying to implement animejs in my react projects. But unable to run my first code. I already installed my animejs package. It would be great if you would help me learn this and guide me on how to do it. Here is the code, help me to resolve the error.
import {useEffect} from 'react'
import anime from 'animejs/lib/anime.es.js';
// import { easings } from 'animejs';
export default function Homeanime() {
const fontSize = {
fontSize:'40px'
}
useEffect(() => {
const basicTimeline = anime.timeline({autoplay:true})
basicTimeline
.add({
target:'.check',
translateX: 250
})
},[])
return (
<>
<h1 className='p-5 check' style={fontSize}>Working</h1>
</>
)
}

install quilljs-markdown on react

I need such an editor on react https://cloverhearts.github.io/quilljs-markdown/ , as you can see in it you can put markdown characters directly into the text.
when I do this
import React, { Component } from 'react'
import './App.css'
import ReactQuill from 'react-quill'
import Quill from 'quill'
import QuillMarkdown from 'quilljs-markdown'
const App = () => {
const editor = new Quill('#editor', {
theme: 'snow'
})
new QuillMarkdown(editor)
return (
<div className='app'>
{/*<MyComponent/>*/}
<div id="editor"></div>
</div>
)
}
export default App
I get error TypeError: Cannot read property 'on' of undefined
as I understand I need jQuery for work, but I use react, I found https://www.npmjs.com/package/react-quill this quilljs for react, but I don't know how to combine it with markdown https://www.npmjs.com/package/quilljs-markdown
can anyone help?
I found the solution for this after hours of trying this out.
What you have to do is this:
Create a module for ReactQuill
Register the module.
Pass modules to react quill
Shown Below.
Step 01
const modules = {
markdownOptions: {}
};
Step 02
Quill.register('modules/markdownOptions', QuillMarkdown);
Step 03
<ReactQuill
modules={modules}
/>
It seems like you are trying to initialize the Quill instance and the markdown module before the editor is ready.
Use useEffect hook to initialize it after the div has been rendered:
import {useEffect} from 'react';
...
useEffect(() => {
const editor = new Quill('#editor', {
theme: 'snow'
});
new QuillMarkdown(editor);
});

TypeError: Object(...) is not a function when using react-toastify

I'm trying to get react-toastify to work in an app I'm writing while following an online course. I'm supposed to install a specific version but I always prefer using the very latest one but when I do, I'm getting a bunch of errors.
I've gone to the npm home page for React-Toastify and they provide very good documentation on how to use it and I believe I've followed the instructions from both the course and react-toastify correctly but I'm still getting an error.
I've defined react-toastify as the top of my App.js
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
and I'm simply calling a test toast as follows:
handleDelete = (post) => {
toast("deleted");
// toast.error("deleted");
}
and in my render method I have the <ToastContainer />:
render() {
return (
<React.Fragment>
<ToastContainer />
<button className="btn btn-error" onClick={this.handleDelete}>
Delete
</button>
When I click on my delete button I get an error (well I'm actually getting a bunch of them but this is the main one):
TypeError: Object(...) is not a function
useToastContainer
..myapp/node_modules/react-toastify/dist/react-toastify.esm.js:866
863 | }
864 |
865 | function useToastContainer(props) {
> 866 | var _useReducer = useReducer(function (x) {
867 | return x + 1;
868 | }, 0),
869 | forceUpdate = _useReducer[1];
Actually, I've just noticed that my <ToastContainer /> was commented out in my render method and the second I uncomment it, the same error occurs immediately as my page loads.
Am I missing something or is this a bug with react-notify and the version of React I'm using i.e. 16.4.1?
I was also facing a similar issue, this is because there are some conflicting dependencies with react-toastify in the newer versions with respect to its predecessor.
Also if you follow some courses they usually provide some resources to proceed with, when you start working on those resource and do a npm i for its dependencies it install certain versions of the package which is specified in the package.json file, so if you are trying to install a new package as a part of the course it might not be compatible with the ones mentioned in the resource files.
So to avoid conflict here you can manually install all the packages mentioned in package.json with the latest versions then install the latest version of react-toastify
OR
Try reverting the version of react-toastify to earlier version , maybe try with react-toastify#4.1 or the version mentioned in the course. (This worked for me)
install an older version of react-toastify and it will work just fine
Remove unused props.
handleDelete = () => {
toast("deleted");
// toast.error("deleted");
}
Or use the function props.
handleDelete = (post) => {
toast(post);
}
And call your function in arrow function.
render() {
return (
<React.Fragment>
<ToastContainer />
<button className="btn btn-error" onClick={() => {this.handleDelete('deleted')}}>
Delete
</button>
</React.Fragment>
)
What works for me was to create another file to hold the <ToastContainer/> and then import it in my App.js and it works fine. Here I'm giving you a simple example:
./src/toast.jsx
import React from "react";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
const Toast = () => {
const errorMessage = () => {
toast.error("Unexpected error occured");
};
return (
<div>
<button onClick={errorMessage} className="btn btn-primary">
Submit
</button>
<ToastContainer />
</div>
);
};
export default Toast;
./src/App.js
import React, { Component } from "react";
import "./App.css";
import Toast from "./toast";
class App extends Component {
state = {
};
render() {
return (
<React.Fragment>
//Your code...
<Toast />
</React.Fragment>
);
}
}
export default App;
However, my application is a little bit more complex and basically I have a file httpServices.js, where I'm using Axios library to make HTTP requests and catch errors. So if I catch an error while sending an Http request and I'm using "toast.error("Message")". I'm using the new file toast.jsx to hold a container for the errors and this container I import in my App.js.

Dynamically loading Material-UI Icons in React

I'm trying to make React component that dynamically imports requested Material-UI icon,
when the page loads. My solution presented here works, but it gives warning
at compile time. Additionally it slows down the compilation of the project.
Any idea on how to do this properly?
https://github.com/jurepetrovic/ordermanager_demo
The main logic is found in App.js, lines 5-10:
import React, { Component } from 'react';
import BarChartIcon from '#material-ui/icons/BarChart';
const MaterialIcon = ({ icon }) => {
console.log("icon: " + icon);
let resolved = require(`#material-ui/icons/${icon}`).default;
return React.createElement(resolved);
}
class App extends Component {
render() {
return (
<div>
<MaterialIcon icon={"PowerSettingsNew"} />
</div>
);
}
}
export default App;
The warning it gives is this:
Compile warning
I finally found the simplest solution to this problem:
import all material icons from the package:
import * as Icons from '#material-ui/icons'
I assume you fetch your icon names from your api and finally you have something like this:
var iconNamesArray = ["FitnessCenter","LocalDrink","Straighten"]
Finally load your Icons like below:
<div className="my-icons-wrapper-css">
{
iconNamesArray.map((el,ind)=>{
let DynamicIcon = Icons[el]
return(
<DynamicIcon className="my-icon-css"/>
);
})
}
</div>
And your icons will appear in the screen.

Using marked in react

I want to use marked in reactjs as described in the reactjs docs.
<div>{marked(mystring)}</div>
I use babel so I import marked like this:
import { marked } from 'marked';
Unfortunately the import statement does not work. marked is not defined.
How do I have to import marked here, so that I can use it?
Here's one way to use marked with React:
Ensure that you've installed marked
Include marked in your project's package.json file:
// package.json
{
dependencies: {
react: "^17.0.0",
marked: "^4.0.0",
},
}
Import marked in your .jsx (or related) file:
import { marked } from "marked";
Use the dangerouslySetInnerHTML approach as shown in the example below:
import React from "react";
import { marked } from "marked";
class MarkdownExample extends React.Component {
getMarkdownText() {
var rawMarkup = marked.parse("This is _Markdown_.");
return { __html: rawMarkup };
}
render() {
return <div dangerouslySetInnerHTML={this.getMarkdownText()} />;
}
}
The dangerouslySetInnerHTML attribute gives you the ability to work with raw (HTML) markup. Make sure to take care when using this attribute, though!
Alternative (Safe)
If you don't want to use dangerouslySetInnerHTML and safely render HTML. Try marked-react, which internally uses marked to render the html elements as react components
npm i marked-react
import Markdown from "marked-react";
const MarkdownComponent = () => {
return <Markdown>{rawmarkdown}</Markdown>;
};
Another alternative is react-markdown
Here is another way of using marked with React Hooks:
Create your MarkedConverter component
import { useState } from 'react'
import marked from 'marked'
export const MarkedConverter = () => {
const [markedVal, setMarkedVal] = useState(
'# Welcome to my React Markdown Previewer!'
)
return <div dangerouslySetInnerHTML={createMarkUp(markedVal)}></div>
}
Create Markup function and pass the value from MarkedConverter Component
export const createMarkUp = (val) => {
return { __html: marked(val) }
}
Finally you can import MarkedConverter Component to any of your Component
With the marked-wrapper react-marked-markdown:
import { MarkdownPreview } from 'react-marked-markdown'
export default ({ post }) => (
<div>
<h1>{ post.title }</h1>
<MarkdownPreview value={ post.content }/>
</div>
)
If you just want to import marked:
import marked from 'marked';
Then call the function in your component:
marked('# Markdown');
Here's an example on how to use marked with react:
Install marked with NPM : npm i marked
import it in your react app (this example is created with create-react-app), and using it
example of a react component using "marked"
result in the browser :
preview

Resources