I have a multi language web project made by React.js & typescript and want to using bootstrap 5 CSS.
The problem is I want to dynamically change bootstrap CSS link on head section depend on language (ltr or rtl).
This link in public/index.html file:
<head>
...
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
...
</head>
convert to this dynamically:
<head>
...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.rtl.min.css" integrity="sha384-mUkCBeyHPdg0tqB6JDd+65Gpw5h/l8DKcCTV2D2UpaMMFd7Jo8A+mDAosaWgFBPl" crossorigin="anonymous">
...
</head>
After changing language I want to modify CSS link for rtl or ltr.
I'm using method on rout and successfully changing HTML dir but looking to modify with React.js & TypeScript.
Is there any solution for doing this?
You can do this by using ReactHelmet.You can create a StyleSheetUrlSelector Component. Then based on your criteria, you can render whichever stylesheet you want to render.
import React,{ FC } from "react";
import ReactHelmet from 'react-helmet';
interface ICssSelector {
ltr:boolean;
}
const CssSelector:FC<ICssSelector> =(props)=>{
const {ltr} =props;
return(
ltr === true?
<ReactHelmet link={
[{"rel": "stylesheet", type:"text/css", "href": "/style.ltr.css"}]
}/>
: <ReactHelmet link={
[{"rel": "stylesheet", type:"text/css", "href": "/style.rtl.css"}]
}/>
);
}
export default CssSelector
Related
I am trying to use the Icon class from Material UI v5, I added the following to my index.html
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
and then I use
import { Icon} from '#mui/material';
<Icon color="inherit">file_download</Icon>
But My icons still dont show
You can try to change the import path to import Icon from '#mui/material/Icon';
I finally managed to it working by adding all the Icons in my index.html file
From
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
to
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
I Think some icons dont work if you dont specify all of them in the stylesheet
I am making a react app. But in the title bar, it is showing 'React App' with React logo. I want to change it to my website name and logo, and how can I do that ?
If you want to change the title, you can go to: public/index.html, and then change the <title>React App </title>
To change your logo, go to the public folder and change the favicon.ico.
If you follow these steps, your logo and title will get changed.
If it helps you, please mark as accepted answer.
you can change title and icon on public/index.html in react project.
<head>
...
...
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<title>React App</title>
...
...
</head>
Making changes in public/index.html would only change the default values (title and favicon), and it will be set for all pages. More on this method and some (complex) alternatives in the official docs: https://create-react-app.dev/docs/title-and-meta-tags/
...or you can use React Helmet, a third-party library recommended in the official docs as well: https://github.com/nfl/react-helmet. It will allow you to set page title/favicon/other head elements from the components itself.
Example code using React Helmet:
import {Helmet} from "react-helmet";
class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://example.com/example" />
</Helmet>
...
</div>
);
}
};
You can change your page title by doing something like this.
const pageTitle = `${title}`;
Then:
document.title = pageTitle;
you can change the logo from ./assets/index.htm and change the href.
and input your image to ./assets/
I'm using FontAwesome inside a React App and TypesScript(created with react-react-app), but the icons aren't showing yet I followed the documentation's guide step-by-step.
Importing icons globally (index.tsx)
import { library } from '#fortawesome/fontawesome-svg-core';
import { faCheckSquare, faCoffee } from '#fortawesome/free-solid-svg-icons';
library.add(faCheckSquare, faCoffee);
Using the icons in my component
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
export const Home = ()=> {
return <FontAwesomeIcon icon='coffee' size='lg'/>
}
What is happening?
The below screenshot shows where the icon is supposed to be next to view price changes but it's not visible. What am I doing wrong? Thanks in advance.
Most probably Css of font-awesome is not added
try adding this in your index.html file.
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
</head>
I'm fetching data from api call in _document.js, and based on data putting condition to include css using Link tag.
I was trying to include css file from public/static/ folder in _document.js or layout.js file,
but not working.
layout.js file
import React from 'react';
import Head from 'next/head'
...
<Head>
<link rel="stylesheet" href="public/static/ed_style.css" />
</Head>
...
I think your link is not correct. You can try an absolute one like this
<link rel="stylesheet" href="/static/ed_style.css" />
You should use import NextHead from 'next/head' instead of import Head from 'next/head'
Create your own Head component :
const Head = () => (
<NextHead>
<link rel="stylesheet" href="static/ed_style.css" />
</NextHead>
)
And then in your layout.js
import Head from '../components/head.js'
Thank you guys for you time.
I got solution.
I have put my css file ed_style.css directly to public folder and accessed as below.
<link rel="stylesheet" href="/ed_style.css" />
and Its working
I am working in a project with react and my client wants me to have a button to toogle between Bootstrap and Foundation.
I have checked some options and I came to the conclusion that it is best to use hooks to manage each of the state, but I don't know how to import them correctly.
const theme = (mode: string) =>
mode === "dark"
? "bootstrap/dist/css/bootstrap.css"
: "foundation-sites/dist/css/foundation.min.css";
export default theme;
import theme from "./theme/experiment.js";
ReactDOM.render(<App />, document.getElementById("root"));
I expect React to import the correct theme base on the value of "mode"
You can import css in your virtual DOM in react component.
<link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.css" />
That means you can change href attr by using state.
<link
rel="stylesheet"
type="text/css"
href={this.props.isBootstrap ? "bootstrap/dist/css/bootstrap.css" : "foundation-sites/dist/css/foundation.min.css"}
/>
Of course you can change your css by state or props.