I am trying to use react-avatar-editor (https://www.npmjs.com/package/react-avatar-editor ) I have installed and import the component but I didn't get the button upload
Here is my simple component wher I used the Avatar Editor
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Nav from "./Nav";
import AvatarEditor from 'react-avatar-editor'
export default class EditProfile extends Component {
render () {
return (
<div>
<Nav logoUrl="logo_white.svg" color="#D41F36"/>
hello there
<AvatarEditor
image="/imgs/A066.jpg"
width={250}
height={250}
border={50}
color={[255, 255, 255, 0.6]} // RGBA
scale={1.5}
rotate={0}
/>
</div>
)
}
}
I should have this screen
but I had this
please help out on this ?
react-avatar-editor doesn't handle the image selection. It deals specifically with the image crop, resizing and rotation of a given image. So you need to code something to get the image and pass to react-avatar-editor component.
You can check how to do it here https://github.com/mosch/react-avatar-editor/blob/master/docs/App.jsx
Related
I am trying to import an SVG-File as a React Component. This works fine in other files I am working on. But in the one I have a problem with, instead of the correct image, another image is displayed.
import React from 'react';
import './news-detail.style.css';
import Header from '../header/header.component';
import {useNavigate} from "react-router-dom";
import CustomButton from '../custom-button/custom-button.component';
import { ReactComponent as Img } from './newsdetail.svg';
const NewsDetail = props => {
const navigate = useNavigate();
return <div className='news-detail'>
<Header/>
<h1 className="pageheadline">News</h1>
<CustomButton onClick={() => navigate(-1)}>Back</CustomButton>
<Img className="headerimg"/>
</div>;
};
export default NewsDetail;
This is my code. The newsdetail.svg is not displayed. Instead, a component from my Header is displayed as the image.
Thanks in advance.
I'm attempting to add an SVG to a React app (built with create-react-app). When I try to add it as a component, I get an error like this:
InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/logo.8d229b2c.svg') is not a valid name.
What am I missing?
Code:
import React from 'react';
import Logo from '../img/logo.svg';
const Header = () => {
return (
<div>
<Logo />
</div>
)
}
export default Header;
You can import it this way:
import { ReactComponent as Logo } from '../img/logo.svg';
as said in CRA (create-react-app) documentation
an render it the way you want:
import React from 'react';
import { ReactComponent as Logo } from '../img/logo.svg';
const Header = () => {
return (
<div>
<Logo />
</div>
)
}
And also, if it's not necessary to render it as a component, you could just render your svg as an image this way:
import React from 'react';
import logo from '../img/logo.svg';
const Header = () => {
return (
<div>
<img src={logo} alt="logo"/>
</div>
)
}
export default Header;
You need to import the component using this syntax:
import { ReactComponent as Logo } from '../img/logo.svg';
Using the curly braces and ReactComponent is necessary - they tell React that you want to build a component with the SVG.
I only found this because of a Dan Abramov reply to a create-react-app issue. The link he posted in his comment no longer works, but it's still mentioned in the docs.
https://github.com/facebook/create-react-app/issues/5293
https://create-react-app.dev/docs/adding-images-fonts-and-files/
I am learning to develop a multi-page app with React Router. I have been following a tutorial and have managed to set up multiple page without any content. However, I want to add the original main content of the home page that was originally running properly before I used react-router. If I delete the code that is in the div called App, I have added in Home.js, then I can go back to switching between blank pages with no errors:
import React from 'react';
//import "./App.css";
import List from "./List";
import Title from "./Title";
import Ending from "./Ending";
import MoviePage from "./MoviePage";
const home = () => {
return (
<div className="App">
<Title pics={this.state.pics} changePageNumber={this.changePageNumber}/>
<List parentCallback={this.loadMoviePage} movieList={this.state.movieList}/>
<Ending toad={this.state.toad} speedUp={this.state.speedUp}/>
</div>
);
}
export default home;
So I know that I am not able to access the content from this.state.pics.(Nor the other 3 components). I created this content(and by content I mean the arrays that have the general information, i.e image location, etc). in App.Js so I am wondering how can I pass it in to this new Home.js file?
You can not access state in stateless component , if you need some data from another component you need to pass it as props from parent to children , just to show you i just make an example of your code follow it, you will get it
App.js
import React from 'react';
import Home from "./Home";
class App extends Component {
constructor() {
super();
this.state = {
pics: YourArrayDataHere,
};
}
render () {
return (
<Home pics={this.state.pics} />
);
}
export default App;
Home.js
import React from 'react';
//import "./App.css";
import List from "./List";
import Title from "./Title";
import Ending from "./Ending";
import MoviePage from "./MoviePage";
const home = (props) => { //access throught props
return (
<div className="App">
<Title pics={props.pics} />
</div>
);
}
export default home;
I am using React version 16.8.6. I am trying to load some SVG images in my application, But there is a 1-second delay before the image appears in dom.
Here is how I load svg image
import menuIcon from 'public/images/menu_icon.svg';
<img src={menuIcon} />
Please find the gif link that shows the loading delay issue.
https://ibb.co/jH35S38
PS. This happens in production only.
I had the same problem, i found the article below which says that you can use SVGs as component and because the image is not loaded as a separate file there is no delay.
It works for me.
https://blog.logrocket.com/how-to-use-svgs-in-react/
import React from 'react';
import {ReactComponent as ReactLogo} from './logo.svg';
const App = () => {
return (
<div className="App">
<ReactLogo />
</div>
);
}
export default App;
I want to import a different set of SVG icons based on my Branding variable.
I try something like this :
import { BRANDING } from 'BrandingBuilder';
import {`${BRANDING}-icons.svg`};
But I know React didn't support to import a {variable}. Is there a workaround ?
According to the React Docs:
You can
also import SVGs directly as React components. You can use either of
the two approaches. In your code it would look like this:
import { BRANDING } from 'BrandingBuilder';
import { ReactComponent as Logo } from `${BRANDING}-icons.svg`;
const App = () => (
<div>
{/* Logo is an actual React component */}
<Logo />
</div>
);