In my React app I have a form page for a book which has an option to upload a cover photo. I decided to use material-ui-dropzone (https://yuvaleros.github.io/material-ui-dropzone/) which works great, but I ran into one issue. The preview does not look very good when only one file is allowed.
I would like it to be centered and as big as possible, but I am really struggling. Relevant code:
const useStyles = makeStyles(() => ({
dropZone: {
height: '100%',
fullWidth: 'true',
},
previewContainer: {
container: 'true',
width: '100%',
height: '100%',
},
preview: {
//width: '100%',
//height: '100%',
//item: 'true',
xs: '12',
},
previewImg: {
//height: '100%',
//width: '100%',
},
}));
const classes = useStyles();
<DropzoneArea
acceptedFiles={['image/*']}
dropzoneClass={classes.dropZone}
previewGridClasses={{
container: classes.previewContainer,
item: classes.preview,
image: classes.previewImg,
}}
dropzoneText={'Upload book cover image'}
filesLimit={1}
onChange={(files) => formikProps.setFieldValue('coverImage', files)}
showAlerts={false}
/>
I have been trying a bunch of things, but so far the only way I even managed to get an actual visual effect was by adding some padding to the preview class. Any help would be very much appreciated.
I ended up resolving the issue after snooping around the source code of the component so I thought I would post the solution here in case someone runs into this in the future. As it turns out the dropzone component does not actually apply the item style to the image (even though the docs say it should). I did find a way around this, you can actually provide a custom getPreviewIcon function to the component and you can add your style there.
<DropzoneArea
acceptedFiles={['image/*']}
dropzoneClass={classes.dropZone}
previewGridClasses={{
item: classes.preview,
}}
getPreviewIcon={(file) => {
if (file.file.type.split('/')[0] === 'image')
return (
<img className={classes.previewImg} role="presentation" src={file.data} />
);
}}
dropzoneText={'Upload book cover image'}
filesLimit={1}
onChange={(files) => formikProps.setFieldValue('coverImage', files[0])}
showAlerts={false}
/>
Related
in my app I use the ToastContainer component to display more than one type of toast. I do not want them both to have the same style, therefore I cannot use a styled ToastContainer to achieve what I want.
I know from the documentation for toastify that a toast can have it's own className for which you can specify the color etc. in a css file. But I want to have the css in the javascript file. But I have not yet found a way for it to work.
This is what I have come up with:
const notify = () => {
toast(customMsg, {
className: container,
autoClose: false,
closeOnClick: false,
position: toast.POSITION.BOTTOM_RIGHT,
});
};
const container = {
backgroundColor: 'yellow !important',
color: ' black !important',
borderRadius: '10px !important',
border: '2px solid orange',
width: '200px'
};
This does not work, but if I change className to "container" and put the styling in a css file it works. Is there a way for the className to be specified in the javascript file?
On my current project in React I need to have the possibility to change the background-style (image, width, height etc.) from a 'div' to nine different options.
I've tried it with following code:
const styleOptions = [
{
backgroundImage: "",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
//backgroundSize: "650px 800px",
backgroundSize: "cover"
},
{
backgroundImage: "url(/PicturesPattern/Picture1.png)",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
//backgroundSize: "650px 800px",
backgroundSize: "cover"
},
...//same code for nine Pictures, only diffrent size values
]
class Example extends React.Component {
state = {
...
...
//for selectionField
isDisabled: false,
backgroundStyle: styleOptions[0]
};
...
...
...
onSelectChange = (event) => {
this.setState({
...
currentStyle: styleOptions[event.value + 1]
});
};
render() {
return (
<>
//div for selectionField
<div className="forBackground" style{this.backgroundStyle}>
...
...
//other code
...
...
</>
)
}
}
But on any change from my selection field, there isnt happening anything to the background of the specific div.
When I put "styleOptions[x]" for x every index possible, I get the specific background image and other style options.
What am I doing wrong?
Hope someone can help me :)
Well, in the onSelectChange function and in the event.value + 1 part you are adding two different types of variables (string and integer). As a result the background styles of div would not change properly. First, you should write this function as below
onSelectChange = (event) => {
this.setState({
backgroundStyle: styleOptions[parseInt(event.target.value) + 1],
});
};
Then, style{this.backgroundStyle} should be changed to style={this.state.backgroundStyle}. I also added the height attributes and assigned a backgroundColor to make the div and changes more visible
But there were also other minor modifications. So, check the sandbox of the corrected version of your code.
I want to use this library for my react js project https://www.npmjs.com/package/html-to-image.
In my case I want to use a var that contain a simple div and export It as an Image, but there's a problem: my var (node) is a JSX.Element and the "toPng" method of the library accept as a parameter an HTMLElement.
I know that the doc of the library suggests to use methods like this to get an HTMLElement: var node = document.getElementById('my-node') but in my case I can't do something like this because my node isn't in the document.
So there's a way to convert a JSX.Element to an HTMLElement? Thanks in advance ;)
To do that, use renderToStaticMarkup from the react-dom/server library.
import { renderToStaticMarkup } from "react-dom/server"
const output = document.createElement('p')
const staticElement = renderToStaticMarkup(reactElement)
output.innerHTML = staticElement
Question might be old, but while looking for a solution for this I found an elegant way to render a hidden element as an image.
render() {
return (
<div>
<div
id="image-template"
className="d-none"
style={{
width: "200px",
height: "200px",
display: "flex",
justifyContent: "center",
alignItems: "center",
color: "white",
fontSize: "10px",
textAlign: "center",
backgroundColor: "green",
}}
>
<span style={{ margin: "20px" }}>{"Hey, an image rendered but not visible!"}</span>
</div>
</div>
);
}
With the class d-none (from bootstrap) the element is hidden to the user, so it does not matter where you place it. d-none in bootstrap is basically display: none !important;.
Now add a function to create an image:
async createImage() {
const template = document.getElementById("image-template").cloneNode(true);
template.classList.remove("d-none");
const base64Image = await htmlToImage.toPng(template, {
height: 200,
width: 200,
});
// Do whatever you want to do with your image
}
The element is cloned and the d-none/display: none removed to be able to render it with htmlToImage. The result is the base64 data you can use whereever you want.
I am building a headless site with Gatsby and WP.
I have a schema coming through from Wordpress which provides me with my JSON values to plugin.
I am trying to set a background image from a value I am getting from my feed but I cant figure out how to make it work.
I feel like its something stupid simple and I am over thinking this.
<h1>{data.wordpressPage.acf.intro_text}</h1>
<div className="box" style={{
backgroundImage: `url({data.wordpressPage.acf.homepage_boxes.box_3_url})`
backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat'
}}>
My schema is below
wordpressPage(wordpress_id: {eq: 10}) {
id
title
acf {
intro_text
intro
homepage_boxes {
box_1_image {
source_url
}
box_2_image {
source_url
}
box_3_image {
source_url
}
box_3_url
box_2_url
box_1_text
box_2_text
box_3_text
box_1_url
}
}
wordpress_id
guid
slug
content
}
}
You're missing a $ and a comma. Try this:
backgroundImage: `url(${data.wordpressPage.acf.homepage_boxes.box_3_url})`,
I have a react-table, each row has the arrow that when clicked expands into a sub-component of another react-table.
I want to change the color of that arrow as well as move it to the right side of the column if possible. Does anyone know if that's possible and how to go about doing that. I've attached a pic of the code for the table as well as how it looks rendered currently. Thanks for any help!
Code example
It's possible by using a Custom Expander. You can just define your column like this:
columns: [
// other columns...,
{
expander: true,
Header: () => <strong>More</strong>,
width: 65,
Expander: ({ isExpanded, ...rest }) =>
<div>
{isExpanded
? <span>⊙</span>
: <span>⊕</span>}
</div>,
style: {
cursor: "pointer",
fontSize: 25,
padding: "0",
textAlign: "center",
userSelect: "none",
color: "green"
},
Footer: () => <span>♥</span>
}
]