I created a component library in react using styled component. The library contains some custom fonts, in different formats, woff, woff,eot, tff, otf and etc. when I use the fonts inside the component library, the fonts works as it should.
The problem arises, when I import the library in another react project. When I look at the node modules, I can se that the fonts are included. The project is bade using React and Next.js. am I missing some important steps to use these fonts?
I don´t get any error. The application, just use the fallback font specified. I I´m not interested in changing the font of my of my whole application. I want to be able to access the font exported with my component Library, and use them in some places og my application.
An example:
My component Library contains the component "Headline", which use a custom font.
export const h1CSS = cssStyled`
margin-top: ...;
margin-bottom: ...;
line-height: ...;
font-weight: ...;
color: ...;
font-family: "Some_custom_Font";
font-style: normal;
margin-top: 0;
text-rendering: optimizeLegibility;
`;
In the application, which import the component Library, I can use the Headline component. The only problem is that the headline component does not have the custom font, when used inside my application.
Without knowing the error messages or all others aspect that hard to tell what exactly you need to do.
But You can customised the Document _document.js for your need. Which is more efficient to solve.
To override the default Document, create the file ./pages/_document.js and extend the Document class as shown below:
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>
//You can add custom Favicon from here also
<link rel="icon" href={Favicon_URL} type="image/png" />
<meta
httpEquiv="cache-control"
content="no-cache, nostore, must-revalidate"
/>
<meta httpEquiv="pragma" content="no-cache" />
<meta httpEquiv="expires" content="0" />
//Please add your woff, woff,eot, tff, otf files here.
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
Official Documentation page
Related
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 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'm new on React, but due to requirements at an assigment in college, I must use it . I must do a single page application (SPA), with various components. I used npx create-react-app to setup the base project, and so you have an idea, it looks like this right now:
Each functionality such as "create new node", "create new line", etc, is an individual component.
On my App.js, I'm setting a state for each component as false, only making it true when the key of the submenu associated with that specific component is clicked, allowing me to switch between the sidebar options with no problem, and then at each component, I have display: false at the state and also this:
componentWillUpdate(nextprops) {
if (nextprops.display !== this.props.display) {
this.setState({ display: nextprops.display });
}
}
so it makes that display true, so that component is loaded. Everything works nicely, only the map viewer has a problem where the map by mapboxgl displays in full screen, covering the sidebar, not allowing me to change between components. The MapViewer component code is:
import React, { Component } from "react";
import mapboxgl from "mapbox-gl";
//import 'mapbox-gl/dist/mapbox-gl.css'
mapboxgl.accessToken="MY_KEY_IS_HERE";
class MapViewerComp extends Component {
constructor(props) {
super(props);
this.state = {
longitude: -8.562298,
latitude: 41.187181,
zoom: 12,
display: false,
};
}
componentWillUpdate(nextprops) {
if (nextprops.display !== this.props.display) {
this.setState({ display: nextprops.display });
}
}
displayTheMap = () => {
const map = new mapboxgl.Map({
container: "root",
style: "mapbox://styles/mapbox/streets-v11",
center: [this.state.longitude, this.state.latitude],
zoom: this.state.zoom
});
var marker = new mapboxgl.Marker().setLngLat([-8.562298, 41.187181]).addTo(map);
};
render() {
let pageContent = <div></div>;
if (this.state.display) {
pageContent = (
<div>
<div ref={this.displayTheMap} className="mapContainer"/>
</div>
);
}
return <div>{pageContent}</div>;
}
}
export default MapViewerComp;
And the .css looks like this:
.ant-switch-handle {
text-align: right;
}
.mapContainer {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
When I click the "Map Viewer" option on my sidebar (which corresponds to my (MapViewerComp), it pops out like this:
Since I'm new to React and frontend, the only was I was able to force it to fit my screen like this:
was to add this piece to the .css of this component:
.mapboxgl-canvas{
position: absolute;
left: 271px;
top: 65px;
}
The 2 problems are:
1st: if I force it to the size I want like I showed you, now when I zoom in and out on the map, the marker moves around and doesn't stay in place.
2nd: when I click the other options on the sidebar, to switch between functionalities, it doesn't work, it keeps showing the map.
The code of the index.js at src(with the npx create-react-app structure) is:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/app/App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
And the code for the index.html on public folder is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
<script src="../src/components/mapViewerComp/MapViewerComp.js"></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css' rel='stylesheet' />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
here's the structure of the project as well if it helps in any way:
Any fix to any of the issues would be appreciated. All other components work like a charm, yet the map viewer is not...
Thank you in advance.
Edit: Turns out the mapbox is set to render inside of the app root container, which why it is taking all the available space and not going away when re-rendering the app. Setting margins exposes the sidebar and allows to interact with it but alas doesn't trigger the map to go away.
See the doc here.
I can't get the baseUrl parameter to work in react-native-webview. My project structure is as follows:
root
---> _tests _
---> android
-------> web
---> ios
---> node_modules
---> src
-------> components
------------> web
------------> MyComponent.js
---> web
I have inserted the web folder 3 times as shown (actually only need to once, this is just for testing). Each 'web' folder contains ponies.jpg. However, nothing is picked up by React Native. I just get 4 broken images with the alt (i.e. 'Ponies') showing. I have also tried using baseUrl: 'web/' to no avail. Here is the code in MyComponent.js:
import React from 'react';
import {View, Text, StyleSheet, Image} from "react-native";
import {WebView} from "react-native-webview";
var html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="ponies.jpg" alt="Ponies" height="42" width="42">
<img src="ponies.jpeg" alt="Ponies" height="42" width="42">
<img src="./ponies.jpg" alt="Ponies" height="42" width="42">
<img src="./ponies.jpeg" alt="Ponies" height="42" width="42">
</body>
</html>
`;
export default class MyComponent extends React.Component {
render() {
return (
<View style = {styles.container}>
<WebView
style = {styles.webview}
source = {{html: html, baseUrl: 'web/'}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
height: 350,
width: 350
},
webview: {
height: 350,
}
})
Thankyou!
OK so I found a solution/workaround for android :D Have actually seen this in another answer but am going to expand a little:
baseUrl needs to be 'file:///android_asset/'.
You then create a directory in the android folder i.e. 'root/android/app/src/main/assets' (see this answer for details how to reference an asset in a library project).
These two folders are now the same. anything you put in assets should be seen by the webview.
IMPORTANT - I then had to rerun 'react-native run-android' to get the image to show up.
Currently, your web folder is inside the android folder
Add a folder web and used this structure:
app/web/ponies.jpg
Use web/ as base URL.
The final piece of the puzzle is to add the web folder to the XCode project (do this in XCode). Otherwise, the files in the web folder are not included in the bundle built for the ios device.
Note: where app is the root of the application.
I am new to react.js. I downloaded a theme which have external JavaScript libraries i.e bootstrap.min.js , jquery.min.js, slider.js, jquery-flexslider.min.js.
I created a React app using create-react-app and I copied all the external JavaScript libraries and CSS files in index.html of the public folder of my react app and copied all the html of index.html of my theme in app.js which I downloaded. All the CSS are working fine but the JavaScript libraries are not working on the page.
Following is the demo of how I included the css files and javascript libraries in index.html of the public folder.
<script src="/assets/javascript/jquery.min.js"></script>
<script src="/assets/javascript/bootstrap.min.js"></script>
<script src="/assets/javascript/jquery.easing.js"></script>
<script src="/assets/javascript/jquery-waypoints.js"></script>
<link rel="stylesheet" type="text/css"href="/assets/stylesheets/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/style.css"/>
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/responsive.css"/>`
Now my question is, how should I include the JavaScript libraries so that it start working. I tried to put all the files in the src folder of my react app but it still not working.
You should consider using react-bootstrap instead of jquery and a minified bootstrap file. By using react-bootstrap you get bootstrap 3 (4 is in the works) as nicely designed react components that you can selectively import and use. So then you can
import React from 'react'
import{ string } from 'prop-types'
import { Col, Row, Label } from 'react-bootstrap'
const PrettyThing = ({ thing }) => (
<Row>
<Col xs={9} xsOffset={1}>
<Label bsStyle="success">{thing}</Label>
</Col>
</Row>
)
PrettyThing.propTypes = { thing: string.isRequired }
export default PrettyThing
and webpack will handle how that's all sliced and diced so only the css you need gets built.
see https://react-bootstrap.github.io/getting-started/introduction/ for more info.