Adding Image into Modal ReactJS - reactjs

I'm trying to insert and style an image in my modal but I'm having trouble doing it. I've tried wrapping the image under a div and apply properties to that div but it doesn't seem to be working either. I've created a link to my sandbox: https://codesandbox.io/s/react-modal-rx1dz?file=/src/App.js
Thank you!

Instead of using simple string, you need to ref the image using require
<img src={require('./modal.jpg')} />
You can also use import
import img from "./modal.jpg";
<img src={img} />
I also changed a little bit the style in order to fit inside the div
https://codesandbox.io/s/react-modal-forked-mpkzm

Related

How to use antd Carousel with antd Image.Preview

I am using React with ant design. I am trying to create a page with a list of cards. In each card, there is an image carousel. I would like that when the user clicks on and image, the preview opens and they can swipe (or click on the arrows) to see all the images as a big, fullscreen preview.
I tried this:
<Image.PreviewGroup>
<Carousel autoplay>
{this.images.map(
(image: string, index: number) => {
return <Image key={index} src={image} preview={{ getContainer: '#root' }} />;
}
)}
</Carousel>
</Image.PreviewGroup>
But what happens here is that when the preview is opened, instead of showing 5 images, it is showing 11 (the images are shown twice, one of the images is shown 3 times).
If I place <Image.PreviewGroup> inside the <Carousel>, then instead of having an image carousel, I have multiple images stacked under each other.
How can I get it to show a clickable carousel, which when clicked, opens a fullscreen preview with the correct number of images that can be seen by swiping/clicking on arrows?
Thanks in advance.
just got into same issue and solved it. for the code structure, the first one you tried was fine
MAIN PROBLEM:
the main issue is on the carousel, which is using slick lib. if you inspect your page, you will find that inside the carousel wrapper tag, it generates 2-3 images for each <img> we declare in our code. so automatically, the Image.PreviewGroup that wraps the carousel, will detect more <img> than it should have
SOLUTION:
add infinite={false} props to your carousel component. for more detail , please refer to slick docs

antd badge number is resized incorrectly

I'm trying to use antd's badge, but the number+badge always looks out of sync with the icon no matter which icon I use.
Here is a screenshot of the problem:
I have antd's badge imported correctly, NotificationOutlined imported properly, and antd is 4.0+. I have attempted using CSS and playing with fontSize but it does not doing anything.
Code:
<Badge count={5}>
<NotificationOutlined />
</Badge>
I'd appreciate any guesses/ insight to how I can solve this!
Source: https://ant.design/components/badge/

React-bootstrap Component Font Size

I wanted to manually changed the font size for a ReactJS project. I tried to add something like
* {
font-size: 10px;
}
and that works with everything that is a plain text. However, every component from react-bootstrap (e.g., DropdownButton, Panel) remains a large font size. Thus, what is the correct way to change the font size for those react-bootstrap components to the same as for other plain text? Inline styling works but I would like the changes to apply to a .css file. Thanks!
Edit: Panel Header code snippet:
<Panel>
<Panel.Heading>
<Panel.Title>
title here
</Panel.Title>
</Panel.Heading>
...
To change the font-size of all text in your project, use
* {font-size: 10px;}
Alternatively, you can pass a style prop to a component, EX: <Panel.Body style={{fontSize: 10}}
It's simple you can add style={{fontSize:"10px"}} inside the jsx button or any element, this will directly apply to your jsx element and bootstrap default won't work.

How to reproduce Material-UI card style

I am studying about Material-UI but I couldn't find in the Demo (example) anything similar with what they have in their website.
My problem is I want to copy this example, so I am trying to reproduce the container (not the content) using the <Card /> component, but it doesn't reproduce very well, so I want to know if there is a specific component to use.
If I understand your question correctly, you're looking for a way to emulate the collapsible demo container that reveals the code behind the demos in Material-UI's documentation (and you want to do so using Material-UI components).
That specific container is implemented in the docs site as an internal component and is composed of Material-UI components with a reliance on JSS for styling. It is also open-source, so looking at the code should help you.
Here is an excerpt from the render method:
<div className={classes.root}>
<IconButton onClick={this.handleCodeButtonClick} className={classes.codeButton}>
<CodeIcon />
</IconButton>
<Collapse in={this.state.codeOpen}>
<MarkdownElement className={classes.code} text={`\`\`\`js\n${raw}\n\`\`\``} />
</Collapse>
<div className={classes.demo} data-mui-demo={name}>
<DemoComponent />
</div>
</div>
This is a component that is used for demos in the Material-UI documentation. It is little more than a styled div with an IconButton.
The MarkdownElement contains the code that is toggled by the code button presented at the top-right of the container. It is wrapped in a Collapse component, which handles the animated transition that takes place when the visibility of that code is toggled.
The DemoComponent is where the demo is presented.
All style is handled using JSS, defined in a stylesheet object.
I'm sure you can build this into a Card by following this pattern. It should be pretty straight-forward, something like adding an action to the CardHeader that triggers a state change and toggles whatever you're looking to expand.

Svg images not animating when using it in <img> tag in react

So basically I am loading a svg in img tag as a loader. Image is coming up and displaying but it's not animating. If I put it in index.html it's working as expected. I expect as it is JSX something I am missing don't know what. Any lead is appreciated.
If SVG image is loaded into an <img> tag, it will render as a static image, and its internals will not be accessible to page's javascript, and page's style definitions will not affect it.
The only way it can be animated is if the SVG itself defines its animation (aka SMIL animation). However, the support for animated SVGs is patchy (IE, Edge, Firefox, Chrome (considered for deprecation)).
If you want to dynamically affect your SVGs, embed them into the page directly, as <SVG> tags.
Is your animated SVG self contained? By that I mean is it using internal SMIL or CSS animation?
If so, then embedding it using <object> should work. It will not animate if you embed it using <img>.
As correctly presented by e-neko in one of the answers of the current question, img tag is rendered as static element. Because of that, this is how I managed to make an animated SVG be correctly rendered:
public render(): ReactElement {
const { icon } = this.props;
return (
<svg>
<image xlinkHref={icon}></image>
</svg>
);
}
The icon is passed as props and imported in the parent component like this:
import LoadingLogo from './assets/images/loading.svg';
I didn't manage to find any official documentation regarding this subject and this worked for me using latest React Version (16.12.0) available when posting this answer.
Cheers

Resources