I try to assimilate an icon of fontawesome in react and the icon not apeear and I get an error in the console.
Here's the code:
import PropTypes from "prop-types";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
const SearchBar = ({ handleChange }) => {
return (
<div className="field">
<FontAwesomeIcon icon="fa-regular fa-magnifying-glass" />
<input
type="search"
className="text-rtl form-control"
placeholder="חפש מוצר"
onInput={handleChange}
/>
</div>
);
};
SearchBar.propTypes = {
handleChange: PropTypes.func.isRequired,
};
export default SearchBar;
And in the file of the index.html I worte the js code:
<script
src="https://kit.fontawesome.com/ab8447aa04.js"
crossorigin="anonymous"
></script>
And I connected to the site of fontawesome. So Why there is a problem?
You no need for react-fontawesome package, you have a Fontawesome CDN in index.html
<script
src="https://kit.fontawesome.com/ab8447aa04.js"
crossorigin="anonymous"
></script>
just add <i className="fa-regular fa-magnifying-glass"></i>
I think your configuration is mixed up between react & non react usage. For react, you don't need to include the script in index.html.
For react there are three dependencies -
npm i --save #fortawesome/fontawesome-svg-core
npm install --save #fortawesome/free-solid-svg-icons
npm install --save #fortawesome/react-fontawesome
After that it is as simple as -
// import icon component
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
// import the icon
import { faCoffee } from "#fortawesome/free-solid-svg-icons";
// usage
<FontAwesomeIcon icon={faCoffee} />
Related
I am a freshman of javascript and react. My question is: How to convert the following code to react code?
<div id="SOHUCS" sid="xxx"></div>
<script charset="utf-8" type="text/javascript" src="https://cy-cdn.kuaizhan.com/upload/changyan.js" ></script>
<script type="text/javascript">
window.changyan.api.config({
appid: 'xxx',
conf: 'xxxxx'
});
</script>
Using componentDidMount()
import React, {Component} from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends Component {
componentDidMount() {
const script = document.createElement("script");
script.async = true;
script.src = "https://some-scripturl.js";
this.div.appendChild(script);
}
render() {
return ( <
div className = "App"
ref = {
el => (this.div = el)
} > < h1 > Hello react < /h1> {
/* Script is inserted here */ } <
/div>
);
}
}
export default App;
Using react-helmet
React helmet is an npm library that manages browser head manager, It is very easy to change web page lines of code inside a head tag.
First, install react-helmet with the npm install command
npm install react-helmet
It adds the dependency to package.json
"dependencies": {
"react-helmet": "^6.1.0",
}
Complete component code to add a script tag to component using react-helmet.
import React, { Component } from 'react';
import { Helmet } from 'react-helmet';
class AddingScriptExample extends Component {
render() {
return (
<div className="application">
<Helmet>
<script src="https://use.typekit.net/hello.js" type="text/javascript" />
</Helmet>
...
</div>
);
}
}
export default AddingScriptExample;
I just discovered PrismJs and it looks perfect. But for some reason, it doesn't highlight my code in following component :
import { useState, useEffect } from "react";
import Prism from "prismjs";
export default function EditCode() {
const [content, setContent] = useState("");
useEffect(() => {
Prism.highlightAll();
}, []);
useEffect(() => {
Prism.highlightAll();
}, [content]);
return (
<section className="codeGlobalContainer">
<textarea
className="codeInput"
value={content}
onChange={(e) => setContent(e.target.value)}
/>
<pre className="codeOutput">
<code className={`language-javascript`}>{content}</code>
</pre>
</section>
);
}
Is there anything missing to make it work ?
It's not specified on there npm page, but you need to download a themed CSS on there official site : PrismsJS
Then, you just move the CSS file to your directory and import it in your component as usual :
import "../../styles/prism.css";
as #FlowRan mentioned you need to import any theme you want to use
but
Note: you do not need to download the themes separately as they come with the package.
Import your theme in your file by using the import statement from-
'prismjs/themes/prism-{theme-name}.css';
**This is my Styles.css File**
.headingStyle
{font-size:4rem;
color:blue;}
Iam importing these styles here but nothing is being applied to the heading
import React from "react"
import styles from "./Css/styles.css"
function App()
{
return (
<div>
<h1 class={styles.headingStyle}> CSS3 Testimonials Slider</ h1>
</div>
)
}
export default App
According to create-react-app documentation on CSS modules you should name your file styles.module.css and then import it like you already did
import styles from './styles.module.css';
Import CSS file directly.
Use className instead of class
Try this
import React from "react"
import "./Css/styles.css"
function App()
{
return (
<div>
<h1 className="headingStyle"> CSS3 Testimonials Slider</h1>
</div>
)
}
export default App
I am developing an app in react js for that, I am using an HTML/CSS/Javascript based template. I am trying to create navbar. This includes adding few scripts in the code. How to include the scripts in React JS?
This is my code, which is currently giving error:
class TopNavBar extends Component {
state = {
loading: true
}
componentDidMount() {
const scripts = [
'../../assets/global/plugins/jquery.min.js',
'../../assets/global/plugins/bootstrap/js/bootstrap.min.js',
'../../assets/global/plugins/js.cookie.min.js',
'../../assets/global/scripts/app.min.js'
];
for (let i = 0; i < scripts.length; i++) {
const addScript = document.createElement('script');
addScript.setAttribute('src', scripts[i]);
document.body.appendChild(addScript);
}
}
render () {
return (
<div>
<div className="page-header navbar navbar-fixed-top">
<div className="page-header-inner ">
<div className="page-logo">
<img src={logo } style={{width: '40px', height: '40px'}} alt="logo" className="logo-default" />
<div className="menu-toggler sidebar-toggler">
</div>
</div>
</div>
</div>
</div>
)
}}export default TopNavBar
When I run this, I get error:
TopNavBar.js:24 GET http://localhost:3000/assets/global/plugins/jquery.min.js net::ERR_ABORTED
what is the correct way of adding template javascript files in ReactJS app?
npm install jquery --save
npm install --save bootstrap
npm install react-cookie --save
Run the above command on the terminal and then include the below line in your script
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import { withCookies, Cookies } from 'react-cookie';
import './app.min.js';
Go to this link (https://www.npmjs.com/package/package), you can search all the required package and their documentation.
I need to mock an imported CSS file in my jest/enzyme test:
Header.test.js
import React from 'react'
import { shallow } from 'enzyme'
import { Header } from './Header'
jest.mock('semantic-ui-css/semantic.min.css') // <-- no effect...
it('should render page title', () => {
const wrapper = shallow(<Header title='Test' />)
expect(wrapper.find('title').text()).toEqual('Test')
})
I do get the error for the import 'semantic-ui-css/semantic.min.css' line:
Test suite failed to run
/Users/node_modules/semantic-ui-css/semantic.min.css:11
#import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin);/*!
^
SyntaxError: Invalid or unexpected token
I don't need import the css file for the test. So I would like to mock that import out for the test. How can I do that?
I tried to do jest.mock('semantic-ui-css/semantic.min.css') but that doesn't work.
This is how the Header.js looks like:
Header.js
import Head from 'next/head'
import 'semantic-ui-css/semantic.min.css'
export const Header = props => {
return (
<Head>
<meta http-equiv='content-type' content='text/html;charset=UTF-8' />
<meta charset='utf-8' />
<title>{props.title}</title>
<link rel='icon' href='/static/favicon.ico' />
<link rel='stylesheet' href='/_next/static/style.css' />
</Head>
)
}
Use ignore-styles package in your jest config.
npm install --save-dev ignore-styles
In your jest.config.js file include these lines
import register from 'ignore-styles';
register(['.css', '.sass', '.scss']);
jest-css-modules is the another package you can try.