I am using react-zoom-pan-pinch library for zoomIn and zoomOut. The problem I’m having is when grabbing and pulling the image, it goes out of bounds. I read docs, and it seems I need to use limitToBounds={true} which helps, but then it won’t help 100% because the image still goes out of bounds. It should be stuck to bounds , so my question is how to make the image stuck to bounds/borders, you should not be able to pull it out of bounds(all functionalities should work, just image stuck to bounds/borders).
try it here: https://codesandbox.io/s/nice-bash-bzvrwf?file=/src/App.tsx
Image of my problem:
import React from "react";
import "./styles.css";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
export default function App() {
return (
<div className="App">
<div className="element">
<TransformWrapper limitToBounds={true}>
{({ zoomIn, zoomOut, resetTransform }: any) => (
<React.Fragment>
<div style={{ border: "1px solid black" }}>
<div className="tools">
<button onClick={zoomIn}>+</button>
<button onClick={zoomOut}>-</button>
<button onClick={resetTransform}>x</button>
</div>
<TransformComponent>
<img
width="100%"
src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg"
alt="test 2"
/>
</TransformComponent>
</div>
</React.Fragment>
)}
</TransformWrapper>
</div>
</div>
);
}
you need to add these props inside the TransformWrapper component:
alignmentAnimation={{ sizeX: 0, sizeY: 0 }}
your example:
codesandboxexample
hope that help :)
Related
I'm creating a flat listview for a React website.
This is a picture of my mockup:
I succed to obtain this:
Next, I would like to limit the size of the flat list and display the overflow-x-scroll.
The problem is, when I put a size, my first image have a wrong display...
This is my code (I use tailwind):
import React from "react";
export type CarrouselProps = {
images: string[],
size: number
}
const Carrousel: React.FC <CarrouselProps> = ({images, size}) => {
return(
<div>
<div className="flex flex-row overflow-x-scroll w-[700px]">
{images.map(url =>
<input className={`w-[${size}px] h-[${size}px] mr-4 object-cover rounded-md`} type="image" src={url} />
)}
</div>
<div className="h-1 mt-3 bg-white w-[700px]"/>
</div>
);
}
export default Carrousel;
Could you help me to fix this wrong display on the first image ?
I specify that only the first image have portrait display
Thanks in advance, for your help
Forgetting that this defeats the purpose of bootstrap, is it possible to fix rows so that components are not moved to the next row when windows are resized smaller? This will make sure that components all stay on the same row, and if the contents of the row exceed the width of the screen then a scroll bar on the browser will appear. I'd like to achieve this behavior without having to use a fixed px width.
Some test code:
App.js
import './App.css';
import { Image } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div className="App">
<div className="Test1">
<Image src='test1.jfif' />
<Image src='test1.jfif' />
<Image src='test1.jfif' />
<Image src='test1.jfif' />
</div>
<div className="Test2">
<Image src='test2.jfif' />
<Image src='test2.jfif' />
<Image src='test2.jfif' />
<Image src='test2.jfif' />
</div>
</div>
);
}
export default App;
App.css
.Test1 {
background-color: blue;
width: 1500px;
}
.Test2 {
background-color: red;
width: "100%";
}
The goal is to get the behavior of <div className="Test2"> to match the layout and behavior of <div className="Test1"> without using a fixed px width.
I have not provided all the runnable code, just the important code. Result:
This image shows the result of the code above. Note that the first row is fixed. To see the entire row, you'll have to scroll in the browser horizontally. The second row adapts to the size of the window.
There is, frankly, no need for ANY custom CSS. Bootstrap can handle it all for you. Just use its d-flex class:
function App() {
return (
<div className="App">
<div className="d-flex">
<Image src='test1.jfif' />
<Image src='test1.jfif' />
<Image src='test1.jfif' />
<Image src='test1.jfif' />
</div>
<div className="d-flex">
<Image src='test2.jfif' />
<Image src='test2.jfif' />
<Image src='test2.jfif' />
<Image src='test2.jfif' />
</div>
</div>
);
}
Sandbox: https://codesandbox.io/s/crazy-snyder-lp0lc?file=/src/App.js:180-186
You can set min-width on the particular container that you do not want to rearrange. You can also use flex or grid to achieve the same effect.
I have been trying to use material-ui and iterate over it inside an array ( for creating ratings for some items like in e-commerce sites). The code isn't working. On my localhost server, it's not showing any stars at all. Before I made it dynamic, it was working all fine, then I added props to my functional component as per to make it dynamic. Everything else is working just fine except that it's not accepting my matrial-ui icon inside the array for me to iterate over. Moreover, the import statement says "it's value is never read although it's imported"
My code: Product.js:
import React from "react";
import "./Product.css";
import StarRateIcon from "#material-ui/icons/StarRate";
function Product({ id, title, image, price, rating }) {
return (
<div className="product">
<div className="product_info">
<p>{title}</p>
<p className="product_price">
<small>$</small>
<strong>{price}</strong>
</p>
<div className="product_rating">
{Array(rating)
.fill()
.map((_, i) => (
<p StarRateIcon className="star" />
))}
</div>
</div>
<img src={image} alt="" />
<button>Add to Basket</button>
</div>
);
}
export default Product;
My home.js file :
import React from "react";
import "./Home.css";
import Product from "./Product";
function Home() {
return (
<div classname="home">
<div className="home_container">
<img
className="home_image"
src="https://m.media-amazon.com/images/G/01/digital/video/sonata/US3P_JOKER_IMAGE_ID/be07783e-2738-4aaf-b90c-d0ec474d15ae._UR3000,600_SX1500_FMwebp_.jpg"
/>
<div className="home_row">
<Product
id="890778"
title="Description"
price={99.99}
image="https://m.media-amazon.com/images/I/71BGLa7IFtL._AC_UY218_.jpg"
rating={5}
/>
<Product />
</div>
</div>
</div>
);
}
export default Home;
Help Somebody! I can use emoji snippets but I really want this to work. I have imported StarRateIcon and used it. It isn't working.
Looks like you accidentally put a 'p' in front of your icon component name. You have <p StarRateIcon className="star" /> when it should be <StarRateIcon className="star" />
You're rendering a p tag with no content with an invalid attribute, StarRateIcon. It's the reason you're not seeing anything rendered. If you inspect the HTML, you'll most likely see the p tags. You may also see errors in the console about invalid attributes. Your code should look something like this:
Array(rating).fill().map(() => <StarRateIcon className="star" />)
I am trying to access the dynamically image from the public directory and using inline style to pass in the props in the Card.js and call it in CardComponent.js. I am very new to react. I don't know what I am doing wrong here. Can you help me with this? Thanks!
Here is the card I am trying to render:
Here is the directory of image I am trying to access : public/assets/img/talent.jpg
Card.js Code:
import React from "react";
import "../styles/Card.css";
function Card(props) {
return (
<div>
<div
className="img-item"
style={{
backgroundImage: `url(require("/assets/img/"${props.image}))`,
}}
>
<div className="text-center centered">
<h3 className="reset-mp text-left mb-2">{props.cardTitle}</h3>
<p className="reset-mp">{props.cardDescription}</p>
</div>
</div>
</div>
);
}
export default Card;
CardComponent.js code:
import React from "react";
import Card from "./Card";
import "../styles/CardComponent.css";
function CardComponent() {
return (
<div className="cards">
<Card
cardTitle="A Talent"
cardDescription="Looking for a job"
image="talent.jpg"
/>
</div>
);
}
export default CardComponent;
Everything inside the public folder is a static file, it will be copied exactly as it is during build in root.
Here a better explanation
So, in your case, you should be able to view you image on:
http://127.0.0.1:3000/assets/img/talent.jpg
So, you can just use:
<div style={{ backgroundImage: `url(/assets/img/${props.image})` }}>
try to change this line /assets/img/ to this ./assets/img/
I'm trying to add a antd modal with drag&drop features.
import React, { Component } from "react";
import Draggable from "react-draggable";
import { Modal } from 'antd';
import 'antd/dist/antd.css';
export default class App extends Component {
state = {
disabled: false
};
render = () => {
const { disabled } = this.state;
return (
<div className="container">
<Modal visible>
<Draggable>
<div>
<h4 style={{ height: 20, userSelect: "none" }}>
{"Drag Me"}
</h4>
<textarea disabled={!disabled} className="uk-textarea" />
<br />
</div>
</Draggable>
</Modal>
</div>
);
};
}
Here's my sanbox code https://codesandbox.io/s/small-currying-j3emq, but it seems that react-draggable in ant modal element doesn't work, probably if I can set the element "ant-modal-content" as draggable element this works.
Does anyone know if it is possible to put the draggable element via props in react-draggable?
I am also available to change the package for drag & drop, I just need to be able to drag a antd modal
Just place your <Draggable> inside your <Modal> and not the opposite
return (
<div className="container">
<Modal visible>
<Draggable>
<div>
<h4 style={{ height: 20, userSelect: "none" }}>{"Drag Me"}</h4>
<textarea disabled={!disabled} className="uk-textarea" />
<br />
</div>
</Draggable>
</Modal>
</div>
);