Related
I started getting this error after migrating to react version 18
makeStyles.js:3 Uncaught Error: MUI: makeStyles is no longer exported from #mui/material/styles. You have to import it from #mui/styles.
I have looked through the docs and tried different things but it didn't work.
How do I make this work?
here is my code:
import { ThemeProvider, createTheme } from "#mui/material/styles";
import { makeStyles } from "#mui/styles";
export default function Program() {
const theme = useTheme();
const [programData, setProgramData] = useState([]);
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
flexWrap: "wrap",
justifyContent: "space-around",
overflow: "hidden",
backgroundColor: theme.palette.background.paper,
},
image: {
height: "72%",
width: "530px",
objectFit: "cover",
paddingBottom: 3,
},
}));
useEffect(() => {
axios
.get("https://cryptic-shelf-72177.herokuapp.com/programs/api")
.then((response) => {
setProgramData([...response.data]);
})
.catch(function (error) {
console.log(error);
});
}, []);
const matches = useMediaQuery(theme.breakpoints.down("xs"));
const classes = useStyles();
return (
<div className={classes.root} style={{ padding: "3vw" }}>
<ImageListItem key="Subheader" style={{ height: "auto" }}></ImageListItem>
<ImageList
rowHeight={550}
cols={matches ? 1 : 3}
className={classes.gridList}
gap={12}
style={{ background: "#A52A2A " }}
>
{programData.length > 0 &&
programData.map((tile, index) => {
return (
<ImageListItem
key={Math.floor(Math.random() * new Date().getTime())}
component={Link}
to={"/programs/" + tile._id + "/programcomments"}
style={{ textDecoration: "none", color: "black" }}
>
<img
src={tile.programImage}
alt={tile.title}
class={classes.image}
/>
<ImageListItemBar
titlePosition="top"
title={tile.title}
// style={{ height: 400 }}
/>
<Typography
paragraph
style={{
borderBottom: "2px solid",
background: "white",
padding: 7,
}}
>
{tile.description.substring(0, 222)}..
</Typography>
</ImageListItem>
);
})}
</ImageList>
</div>
);
}
Everything was working fine until i migrated to React version 18, and made some material us changes that comes with React version 18 and materialui 5
Try this:
Remove all dependencies by deleting node-modules folder in your project.
Open a new terminal and run 'npm install'.
(Those two instructions above are optional)
Since there has been a major change moving from Mui v4 to v5, makeStyles() is deprecated, so that you have to use styled() function instead, and import it from '#emotion/styled';
Example:
import styled from '#emotion/styled';
const useStyles = styled(theme => ({
root: {
//Your styling rules
}
}))
Take a look at the following link as well, thanks for #TeslaDelMar 's answer:
https://www.reddit.com/r/reactjs/comments/uabs6g/material_ui_react_18/
Good luck!
Excuse me, please, I am just learning. In some gatsby templates I can insert as Image - an image from a URL and in some templates Image don't want to display it.
What does it depend on and how to edit the code to make the url work? (My knowledge about graphql is rather basic)
this is the code for the blog template:
/** #jsx jsx */
import { jsx } from 'theme-ui'
import { Link, graphql } from "gatsby"
import Img from "gatsby-image"
import { RiArrowRightLine, RiArrowLeftLine } from "react-icons/ri"
import Layout from "../components/layout"
import SEO from '../components/seo';
const styles = {
'article blockquote': {
'background-color': 'cardBg'
},
pagination: {
'a': {
color: 'muted',
'&.is-active': {
color: 'text'
},
'&:hover': {
color: 'text'
}
}
}
}
const Pagination = (props) => (
<div
className="pagination -post"
sx={styles.pagination}
>
<ul>
{(props.previous && props.previous.frontmatter.template === 'blog-post') && (
<li>
<Link to={props.previous.frontmatter.slug} rel="prev">
<p
sx={{
color: 'muted'
}}
>
<span className="icon -left"><RiArrowLeftLine/></span> Previous</p>
<span className="page-title">{props.previous.frontmatter.title}</span>
</Link>
</li>
)}
{(props.next && props.next.frontmatter.template === 'blog-post') && (
<li>
<Link to={props.next.frontmatter.slug} rel="next">
<p
sx={{
color: 'muted'
}}
>Next <span className="icon -right"><RiArrowRightLine/></span></p>
<span className="page-title">{props.next.frontmatter.title}</span>
</Link>
</li>
)}
</ul>
</div>
)
const Post = ({ data, pageContext }) => {
const { markdownRemark } = data // data.markdownRemark holds your post data
const { frontmatter, html, excerpt } = markdownRemark
const Image = frontmatter.featuredImage ? frontmatter.featuredImage.childImageSharp.fluid : ""
const { previous, next } = pageContext
let props = {
previous,
next
}
return (
<Layout className="page">
<SEO
title={frontmatter.title}
description={frontmatter.description ? frontmatter.description : excerpt}
image={Image}
article={true}
/>
<article className="blog-post">
<header className="featured-banner">
<section className="article-header">
<h1>{frontmatter.title}</h1>
<time>{frontmatter.date}</time>
</section>
{Image ? (
<Img
fluid={Image}
objectFit="cover"
objectPosition="50% 50%"
alt={frontmatter.title + ' - Featured image'}
className="featured-image"
/>
) : ""}
</header>
<div
className="blog-post-content"
dangerouslySetInnerHTML={{ __html: html }}
/>
</article>
{(previous || next) && (
<Pagination {...props} />
)}
</Layout>
)
}
export default Post
export const pageQuery = graphql`
query BlogPostQuery($id: String!) {
markdownRemark(
id: { eq: $id }
) {
id
html
excerpt(pruneLength: 148)
frontmatter {
date(formatString: "MMMM DD, YYYY")
slug
title
description
featuredImage {
childImageSharp {
fluid(maxWidth: 1980, maxHeight: 768, quality: 80, srcSetBreakpoints: [350, 700, 1050, 1400]) {
...GatsbyImageSharpFluid
...GatsbyImageSharpFluidLimitPresentationSize
}
sizes {
src
}
}
}
}
}
}
`
typical post:
---
template: blog-post
title: my title
slug: /plant/bud
date: 2020-05-13 12:37
description: abc
featuredImage: /assets/screen-post-hixmjdah9xhoo-unsplash.jpg (but online image from imgurl png doesnt work)
---
post nr 1
edited ///
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/static/assets/`,
name: `assets`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/content/`,
name: `content`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
gfm: true,
plugins: [
netlifyCmsPaths,
`gatsby-remark-reading-time`,
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1024,
showCaptions: true,
linkImagesToOriginal: false,
tracedSVG: true,
loading: "lazy",
},
},
`gatsby-remark-responsive-iframe`,
{
resolve: `gatsby-remark-prismjs`,
options: {
classPrefix: "language-",
inlineCodeMarker: null,
aliases: {},
showLineNumbers: false,
noInlineHighlight: false,
// By default the HTML entities <>&'" are escaped.
// Add additional HTML escapes by providing a mapping
// of HTML entities and their escape value IE: { '}': '{' }
escapeEntities: {},
},
},
],
},
},
In Gatsby, you can insert images from external sources using the standard HTML <img> tag with the src property:
<img src="https://via.placeholder.com/150" alt="Alt text" width="500" height="600">
If you want to keep the benefits of gatsby-image across the external (or online) images, you should need to use some dependencies to achieve lazy loading and other features.
However, to use gatsby-image you need to allow Gatsby and the inferred GraphQL schema to use their transformers (gatsby-transformer-sharp and sharps (gatsby-plugin-sharp) across with the filesystem (gatsby-source-filesystem) or in other words, Gatsby needs to have access to the images that needs to parse to create a valid queryable GraphQL schema, that will be consumed with the gatsby-image.
In addition, you need to specify the folder of your project where those images belong (setting the filesystem):
const path = require(`path`)
module.exports = {
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: path.join(__dirname, `src`, `images`),
},
},
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
],
}
Once the filesystem is set and the images are processed, a GraphQL node is created, and you are allowed to use the fragments like the one you've provided:
featuredImage {
childImageSharp {
fluid(maxWidth: 1980, maxHeight: 768, quality: 80, srcSetBreakpoints: [350, 700, 1050, 1400]) {
...GatsbyImageSharpFluid
...GatsbyImageSharpFluidLimitPresentationSize
}
sizes {
src
}
}
}
Since the external images can't be directly processed by Gatsby, they can't be used with gatsby-image. Depending on the source of those images, some plugins allow you to keep using gatsby-image from external sources (usually from CMSs like Contentful and others).
You can check for further documentation in Working with images docs.
Update (01/06/2021)
In the last Gatsby version (v2.30) they've added a new experimental feature, still in beta to support external images in a <StaticImage> component. To enable it, just upgrade to the latest Gatsby version (via npm or yarn) and add the following flags in your running scripts:
GATSBY_EXPERIMENTAL_REMOTE_IMAGES=1 gatsby develop
GATSBY_EXPERIMENTAL_REMOTE_IMAGES=1 gatsby build
You can then pass absolute URLs to StaticImage:
<StaticImage src="https://placekitten.com/400/400" alt="Kittin" />
I'm trying to find a way to move my control.zoom and my control.layer. I get there with the css with the :: ngdeep tag but I don't find it clean.
Here is my code:
my TS:
import { Component, OnInit } from '#angular/core';
import * as L from 'leaflet';
import {circle, icon, latLng, map, marker, polygon, tileLayer} from 'leaflet';
import {ObservatoryService} from '../../../#core/services/observatory.service';
import {Observatory} from '../../../#core/models/observatory.model';
#Component({
selector: 'ngx-observatory-labs',
templateUrl: './observatory-labs.component.html',
styleUrls: ['./observatory-labs.component.scss'],
})
export class ObservatoryLabsComponent implements OnInit {
Observ: Array<Observatory>;
ObservLayers = [];
constructor(private obsService: ObservatoryService) {
}
leafletOptions: any = {
layers: [
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
zoomControl: false,
maxZoom: 18,
attribution: '...',
id: 'mapbox.streets',
accessToken: 'your.mapbox.access.token',
}),
L.control.zoom({
position: 'bottomleft',
}),
L.control.layer-toggle({
position: 'topleft',
}),
],
zoom: 17,
center: L.latLng({lat: 43.599508, lng: 1.439671}),
};
layersControl = {
baseLayers: {
'Open Map basic': tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{maxZoom: 18, attribution: '...'}),
'Open Cycle Map': tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
{maxZoom: 18, attribution: '...'}),
'Open satelit Map': tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
{maxZoom: 18, attribution: '...'}),
},
overlays: {
'Critical Zone': L.layerGroup([
circle([43.529070, 1.429942], {radius: 60, color: 'green'}).bindTooltip('<b>Hôtel :</b><br>la flannerie')]),
},
};
My Html:
<div style="height: 700px;"
leaflet
[leafletOptions]='leafletOptions'
[leafletLayersControl]='layersControl'
[leafletLayers]="ObservLayers">
</div>
I tried to move the elements in the initialization of the map but it does not work and I did not find any satisfying examples either. Would someone have the solution please.
You can do it by importing the leaflet CSS in your styles.scss:
#import '../node_modules/leaflet/dist/leaflet.css';
.leaflet-touch .leaflet-bar a {
width: 30px;
height: 30px;
line-height: 30px;
}
I just started learning React-Native. I am facing issue while trying to render image on to the screen, it is not appearing. I have tried so many solutions from Google and stack overflow but could not able to solve the issue.
Can someone please help me. Below are the details.
I am using RN 0.53.0 for Android with atom editor. Please let me know if you need more details.
This is where I am extracting data: http://rallycoding.herokuapp.com/api/music_albums
import React from 'react';
import { Text, View, Image, Linking } from 'react-native';
import Card from './Card';
import CardSection from './CardSection';
import Button from './Button';
const AlbumDetail = ({ album }) => {
const {
title,
artist,
thumbnail_image,
image,
url
} = album;
const {
headerContentStyle,
thumbnailStyle,
thumbnailContainerStyle,
imageStyle
} = styles;
return (
<Card>
<CardSection>
<View style={thumbnailContainerStyle}>
<Image style={thumbnailStyle} source={{ uri: thumbnail_image }} />
</View>
<View style={headerContentStyle}>
<Text style={{ fontSize: 18 }}>{title}</Text>
<Text>{artist}</Text>
</View>
</CardSection>
<CardSection>
<View>
<Image style={imageStyle} source={{ uri: image }} />
</View>
</CardSection>
<CardSection>
<Button onPress={() => Linking.openURL(url)}>
Purchase
</Button>
</CardSection>
</Card>
);
};
const styles = {
headerContentStyle: {
flexDirection: 'column',
justifyContent: 'space-around'
},
thumbnailStyle: {
height: 50,
width: 50
},
thumbnailContainerStyle: {
justifyContent: 'center',
alignItems: 'center',
marginLeft: 10,
marginRight: 10
},
imageStyle: {
height: 350,
width: null,
flex: 1,
justifyContent: 'center'
}
};
export default AlbumDetail;
Here is your code :
Please remove View tag from the image
<CardSection>
<Image style={imageStyle} source={{ uri: image }} />
</CardSection>
stylesheet : for imageStyle
imageStyle: {
height: 300,
width: null,
flex: 1,
}
Please check it and let me know if it working or not.
Here:
imageStyle: {
height: 350,
width: null,
flex: 1,
justifyContent: 'center'
}
You have set the image width to null. Try setting it to a reasonable value.
You need add the style to Image with height and width.
in your code you are not adding the style, try this:
<Image style={styles.imageStyle} source={{ uri: image }} />
Add too a valid size for height and width when you are using a image from internet.
I am trying to show loading indicator in webweb as follow. Loading indicator is showing but there is white background show after page is loaded. If I change to startInLoadingState to false, web content is showing but loading indicator does not show. It is happing in "react-native": "0.46.3" on ios
renderLoadingView() {
return (
<ActivityIndicator
animating = {this.state.visible}
color = '#bc2b78'
size = "large"
style = {styles.activityIndicator}
hidesWhenStopped={true}
/>
);
}
<WebView
source={source}
renderLoading={this.renderLoadingView} startInLoadingState={true} />
I like this approach which shows the activity indicator overlayed on the loading Webview so you don't have to wait until the entire page is loaded to start seeing content.
constructor(props) {
super(props);
this.state = { visible: true };
}
hideSpinner() {
this.setState({ visible: false });
}
render() {
return (
<View style={{ flex: 1 }}>
<WebView
onLoad={() => this.hideSpinner()}
style={{ flex: 1 }}
source={{ uri: this.props.navigation.state.params.url }}
/>
{this.state.visible && (
<ActivityIndicator
style={{ position: "absolute", top: height / 2, left: width / 2 }}
size="large"
/>
)}
</View>
);
}
A nice approach is setting the property startInLoadingState to true and set the renderLoading to return the desired View.
See the example below.
displaySpinner() {
return (
<View>
{/* Your spinner code goes here.
This one commes from react-native-material-kit library */}
<SingleColorSpinner />
</View>
);
}
render() {
return (
<WebView
startInLoadingState={true}
source={{ uri: this.state.myUri }}
renderLoading={() => {
return this.displaySpinner();
}}
/>
);
}
I have steped on that problem and after some research i found a pretty good solution.
It requires the "react-native-loading-spinner-overlay"
npm install --save react-native-loading-spinner-overlay
index.android.js
import Spinner from 'react-native-loading-spinner-overlay';
const main = 'http://www.myURI.pt';
class MyApp extends Component {
constructor(props) {
super(props);
this.state = { uri: main, visible: true };
}
showSpinner() {
console.log('Show Spinner');
this.setState({ visible: true });
}
hideSpinner() {
console.log('Hide Spinner');
this.setState({ visible: false });
}
render() {
return (
<View>
<Spinner
visible={this.state.visible}
textContent={'Loading...'}
textStyle={{ color: '#FFF' }}
/>
<WebView
scalesPageToFit
source={{ uri: this.state.uri }}
onLoadStart={() => (this.showSpinner())}
onLoad={() => (this.hideSpinner())}
/>
</View>
);
}
}
I think i didn't miss any line.
Alter your renderLoadingView function to the following, and the loading indicator should work as desired:
renderLoadingView() {
return (
<ActivityIndicator
color='#bc2b78'
size='large'
styles={styles.activityIndicator}
/>
);
}
So essentially, just remove the animating (as it is not required for the given usage) and hidesWhenStopped props from your ActivityIndicator. Hope this helps.
Copy & Pasteable: Minimal Webview Component with Loading Indicator
import React, { Component } from "react";
import { ActivityIndicator} from "react-native";
import { WebView } from "react-native-webview";
// Pass a "uri" prop as the webpage to be rendered
class WebViewScreen extends Component {
constructor(props) {
super(props);
this.state = { visible: true };
}
hideSpinner() {
this.setState({ visible: false });
}
render() {
return (
<React.Fragment>
<WebView
onLoadStart={() => this.setState({ visible: true })}
onLoadEnd={() => this.setState({ visible: false })}
// Pass uri in while navigating with react-navigation. To reach this screen use:
// this.props.navigation.navigate("WebViewScreen", {uri: "google.ca"});
source={{ uri: this.props.navigation.state.params.uri }}
/>
{this.state.visible ? (
<ActivityIndicator
style={{
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
jusityContent: "space-around",
flexWrap: "wrap",
alignContent: "center",
}}
size="large"
/>
) : null}
</React.Fragment>
);
}
}
export default WebViewScreen;
react-native webview is now deprecated.
You can import react-native-webview and do the following:
<WebView
source={{ uri: 'https://reactnative.dev' }}
startInLoadingState={true}
renderLoading={() => <Loading />}
/>
If you want to show a Spinner and then replace that spinner with the WebView already loaded, this is your answer:
import React from 'react';
import { StyleSheet, ActivityIndicator, View } from 'react-native';
import { WebView } from "react-native-webview";
function MyApp() {
const Spinner = () => (
<View style={styles.activityContainer}>
<ActivityIndicator size="large" color={white} />
</View>
);
return (
<WebView
bounces={false}
startInLoadingState={true}
renderLoading={Spinner}
style={styles.container}
source={{ uri: yourURL }}
showsHorizontalScrollIndicator={false}
scalesPageToFit
/>
)
}
export default StyleSheet.create({
container: {
flex: 1
},
activityContainer: {
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
top: 0,
left: 0,
backgroundColor: black,
height: '100%',
width: '100%'
}
});
I've used #AdamG's solution but there have a problem with absolute path. The below solution is set ActivityIndicator to the center but with a different way.
<View style={{ flex: 1 }}>
<WebView
onLoad={() => this.hideSpinner()}
style={{ flex: 1 }}
source={{ uri: 'yourhtml.html' }}
/>
<View style={{backgroundColor:'white', height:1}}></View>
{this.state.visible && (
<View style={{flex:1, alignItems:'center'}}>
<ActivityIndicator
size="large"
/>
</View>
)}
</View>
There is 2 another {flex:1} View and ActivityIndicator is in top of the bottom View. I've centered that.
<View style={{backgroundColor:'white', height:1}}></View>
And this line is set the opacity when you have loading state, there have two different View. In top view there is WebView and there is a black bottom border View belong to the WebView.For closing I've patched it with a white helper view.
Hey bro this is my solution, you have to use the event onLoadEnd instead onLoad, the event onLoad is not working for me.
import React, { Component } from 'react';
import { StyleSheet, ActivityIndicator, View } from 'react-native';
import { WebView } from "react-native-webview";
export default class MainActivity extends Component {
constructor(props) {
super(props);
this.state = { visible: true };
}
showSpinner() {
console.log('Show Spinner');
this.setState({ visible: true });
}
hideSpinner() {
console.log('Hide Spinner');
this.setState({ visible: false });
}
render() {
return (
<View
style={this.state.visible === true ? styles.stylOld : styles.styleNew}>
{this.state.visible ? (
<ActivityIndicator
color="#009688"
size="large"
style={styles.ActivityIndicatorStyle}
/>
) : null}
<WebView
style={styles.WebViewStyle}
//Loading URL
source={{ uri: 'https://aboutreact.com' }}
//Enable Javascript support
javaScriptEnabled={true}
//For the Cache
domStorageEnabled={true}
//View to show while loading the webpage
//Want to show the view or not
//startInLoadingState={true}
onLoadStart={() => this.showSpinner()}
onLoad={() => this.hideSpinner()}
/>
</View>
);
}
}
const styles = StyleSheet.create({
stylOld: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
styleNew: {
flex: 1,
},
WebViewStyle: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
marginTop: 40,
},
ActivityIndicatorStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
},
});
My response will not directly answer your question but it will get you to think about using Skeleton loaders in place of traditional loading indicators (ie. spinner). I've replaced all my project's indicators with Skeletons and have received great user feedback since the change.
Here's a detailed explanation:
https://mechanicalrock.github.io/2022/07/11/replace-circular-loaders-with-skeletons-a.html
Hope this plants the seed as a pattern going forward.
<WebView
style={{
flex: 1
}}
startInLoadingState={true}
source={{ uri: "https://google.com" }}
renderLoading={() => (
)}
/>