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/
Related
My Application loads a different CSS file depending on user's role. To do that, I used 'Head' tag from next.js and import it dynamically.
Layout.jsx
const Layout = () => {
return (
<>
<Head>
{
role == 'admin' ?
<link rel="stylesheet" href="admin.css">
: <link rel="stylesheet" href="user.css">
}
</Head>
</>
)
}
It works perfect but I don't want to show unsettled or uncolored screen before CSS fully loaded. Is there any way I can get loading state of CSS file so that I can render some spinner or skeleton before it gets loaded.
Just started NextJS version 11.1 and all routes are working first time the website is launched. However when I click on the Home Page/index.js, I get the 404 Not Found. Any help here would be appreciated. Thanks
Here's the index.js code:
export default function Home() {
return (
<>
<Head>
<title>Home Page</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Hero>
<Heading>NEXT</Heading>
</Hero>
</>
);
}
Remove the "/index" from the Link and just add "/"
That is the default route for index.js
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
I have been trying to add facebook feed to a gatsby website that I'm working on and it doesn't seem to work!
I've tried to add the scripts in gatsby-ssr.js
const React = require("react")
exports.onRenderBody = ({ setPostBodyComponents }) => {
setPostBodyComponents([
<div id="fb-root"></div>,
<script
async={true}
defer={true}
crossOrigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=2186738638294469&autoLogAppEvents=1"
></script>,
])
}
then in component
<div
className="fb-page"
data-href="https://www.facebook.com/TechnoBondCo/"
data-tabs="timeline"
data-width="400"
data-height="400"
data-small-header="true"
data-adapt-container-width="true"
data-hide-cover="true"
data-show-facepile="false"
>
<blockquote
cite="https://www.facebook.com/TechnoBondCo/"
class="fb-xfbml-parse-ignore"
>
<a href="https://www.facebook.com/TechnoBondCo/">
تكنوبوند - صناع الكلادينج Techno Bond
</a>
</blockquote>
</div>
but it didn't work, I also tried to use react-facebook but I cant seem to change the width or height of the iframe
any idea how to do this?
ERRORS USING REACT HELMET
I get this console error:
- warn "export 'default' (imported as 'Helmet') was not found in 'react-helmet'
and get this browser error:
You need to use <Helmet> tag, like this:
<Helmet>
<script async={true} defer={true} crossOrigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=2186738638294469&autoLogAppEvents=1" />
</Helmet>
You can check for further information about Gatsby's Helmet, and React Helmet, but basically, <Helmet> component allows you to insert a few code that will be placed after compilation inside the <head> tag.
You can use it in any component, for example, in IndexPage component it would be:
import { Helmet } from 'react-helmet';
const IndexPage = () => (
<Layout>
<SEO title="Live" />
<Helmet>
<script async={true} defer={true} crossOrigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=2186738638294469&autoLogAppEvents=1" />
</Helmet>
I've tested in my local machine it loads perfectly as it shows the following screenshot:
I have tried to share images on facebook with React. I have dynamically added og:image tags using react-helmet npm and also pre-rendered the build using react-snapshot. while view the source the og:image URL's are present but when I try to share the image it won't share.
if I provide the static og:image URL in index.html the facebook works as expected. I have tried the pre-render with react-snapshot and add meta tags
import {Helmet} from "react-helmet";
fbshare1 = () => {
window.open(
'https://www.facebook.com/sharer.php?u='+encodeURIComponent(window.location.href),
'facebook-share-dialog',
'width=626,height=436');
return false;
}
<Helmet>
<title>About us Title</title>
<meta property="og:url" content="https://little-parrot-19.localtunnel.me" />
<meta property="og:title" content="Welcome to Passup" />
<meta property="og:description" content="A URL with no session id or extraneous parameters. All shares on Facebook will use this as the identifying URL for this article." />
<meta property="og:image" content="https://external-preview.redd.it/QB5Nv2dee5NmtpgFOxdjBrfp4MitMx_7OPoYVOLceVk.jpg?width=960&crop=smart&auto=webp&s=1fb548e43b8e5fe9b2fd7ba26af6da4221efcddb" />
<meta property="og:image:type" content="image/png" />
<meta property="og:type" content="Free Web" />
<meta property="fb:app_id" content="12345678900" />
<meta property="article:author" content="Passup" />
<meta property="article:publisher" content="Passup trioangle" />
<meta property="og:image:secure_url" content="https://external-preview.redd.it/QB5Nv2dee5NmtpgFOxdjBrfp4MitMx_7OPoYVOLceVk.jpg?width=960&crop=smart&auto=webp&s=1fb548e43b8e5fe9b2fd7ba26af6da4221efcddb" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
</Helmet>
<a href="#" onClick={this.fbshare1}> Share on Facebook without sharer fb2 </a>
on the otherhand my server side rendering looks like this with express
import path from 'path';
import fs from 'fs';
import React from 'react';
import express from 'express';
import ReactDOMServer from 'react-dom/server';
import {StaticRouter} from "react-router-dom";
import { Helmet } from 'react-helmet';
import App from '../src/App';
const PORT = 3006;
const app = express();
app.use(express.static('./build'));
app.get('/*', (req, res) => {
const app = ReactDOMServer.renderToString(<StaticRouter location=
{req.url}><App /></StaticRouter>);
const helmet = Helmet.renderStatic();
const indexFile = path.resolve('./build/index.html');
fs.readFile(indexFile, 'utf8', (err, data) => {
if (err) {
return res.status(500).send('Oops, better luck next time!');
}
res.send(formatHTML(app, helmet));
});
});
const formatHTML = (appStr, helmet) => {
return `
<!doctype html>
<html prefix="og: http://ogp.me/ns#"
${helmet.htmlAttributes.toString()}>
<head>
${helmet.title.toString()}
${helmet.meta.toString()}
${helmet.link.toString()}
</head>
<body ${helmet.bodyAttributes.toString()}>
<div id="app">
${appStr}
</div>
</body>
</html>
`
}
app.listen(PORT, () => {
console.log(`😎 Server is listening on port ${PORT}`);
});
Check next framework. It have server side rendering for react. It is very easy to setup and use it. They have pretty good documentation. Read the documentation and see how _document.js works in this framework it will do the job. Good luck :)
More info about the next server side rendering here
Try using react-helmet-async, which was a fork of react-helmet developed to solve such issues.
Just don't forget to wrap your application inside a HelmetProvider which is used to manage Helmet's state using React's context API.
You'll need react 16+ to use this package.