How to keep wrapper remain centered when zooming? - javascript

I'm trying to zoom in using the input slider, and I want when content overflows the scrollbar to appear and also position the content to stay centered.
import { useState } from "react";
export default function App() {
const [scale, setScale] = useState(0.3);
const updateScale = (e) => {
setScale(parseFloat(e.target.value));
};
return (
<div style={{
background:"#DE5833",
width:"100%",
height:"100vh"
}}>
<div
style={{
position: "absolute",
zIndex: 50
}}
>
<input
type="range"
min="0.1"
max="1.5"
step="0.01"
value={scale}
onChange={updateScale}
/>
</div>
<div style={{
background:"#DE5833",
width:"100%",
height:"100%",
display:"flex",
justifyContent:"center",
alignItems : "center",
transform: `scale(${scale})`,
}}>
<div
style={{
width: 600,
height: 600,
background:"#2563EB"
}}
>
</div>
</div>
</div>
);
}
This is the example of what behaviour I want to achieve
https://res.cloudinary.com/dv8aesvfs/video/upload/v1630150060/screen-capture_dernvs.mkv
I can center the content , but i can't sroll to the top or to the left like this :
https://res.cloudinary.com/dv8aesvfs/video/upload/v1630150115/screen-capture_1_aas9k8.mkv
you can try it here : codesandbox

Related

How to add space between item row?

I want to have this design
This is what I have now
export default function Minter({
...
}) {
const uploadButton = (
<div>
Choose file
</div>
);
const uploadView = (
<div style={{ padding: 50 }}>
<p className="uppercase text-gray-400 mb-6 text-center">
PNG, GIF, WEBP, MP4 or MP3. Max 100mb.
</p>
<Upload
name="avatar"
accept=".jpeg,.jpg,.png,.gif"
listType="picture-card"
className="avatar-uploader"
showUploadList={false}
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
beforeUpload={beforeUpload}
>
{uploadButton}
</Upload>
</div>
);
const preview = previewURL ? <img src={previewURL} style={{ maxWidth: "800px" }} /> : <div />
const nameField = (
<Input
style={{
border: 0,
}}
placeholder="Enter a name" onChange={e => {
setName(e.target.value);
}} />
);
const descriptionField = (
<Input.TextArea
placeholder="Enter a description" onChange={e => {
setDescription(e.target.value);
}} />
);
const priceField = (
<Input.TextArea placeholder="Enter a price" onChange={e => {
setPrice(e.target.value);
}} />
);
const mintButton = (
<Button type="primary" disabled={!mintEnabled} onClick={startMinting}>
{minting ? <LoadingOutlined /> : "Mint!"}
</Button>
)
const minterForm = (
<body>
<div style={{
alignItems: 'center',
display: "flex", flexDirection: "column",
}}>
<div style={{justifyContent:'space-between',display: "flex", flexDirection: "row" }}>
<div style={{
borderStyle: 'dotted',
borderRadius: 1,
}}>
{file == null && uploadView}
{preview}
</div>
<div>
<div> Name</div>
{nameField}
<p>Description</p>
{descriptionField}
<p>Price</p>
{priceField}
{mintButton}
{status}
</div>
</div>
</div>
</body>
);
return minterForm;
}
How to add space in middle?
How to align name,description,price to left?
I would like to shorten the height of the "Choose file", make it look exactly like the above image.
Any suggestion would be much appreciated.
It's difficult to answer some of these questions as there's no reproducible code link (CodeSandbox, etc).
The outer flexbox is likely causing some issues as it's probably not letting the children breathe - for these two components you should only need one parent flex with both justify-content: center and align-items: center
gap css property for flex/grid should be your friend here. If adding a gap on the second flex does nothing, see above or add a minWidth.
This is likely due to other styles interfering. Either add an explicit text-align: left, or use the Inspect feature of your browser to see what's happening.
Add a maxHeight to the div, or look into what styles are being applied by the avatar-uploader class.
I'd look into the Material UI library, as the TextField component has similar styling to the reference image.

responsive div height on conditional rendering?

I am working on a react project, where I want to conditionally render a div above an existing div that currently covers the screen with an image. I would like the existing div to reduce in height, by shrinking the size of the image, when the second div conditionally renders. The second div can have a varied height. ( e.g. list of items).
This is simplified version of what I have in my App so far:
function App() {
const [show, setShow] = useState(false);
return (
<div
style={{
border: "solid",
width: "100%",
maxHeight: "100vh"
}}
>
{show && (
<div>
<div style={{ height: "300px", backgroundColor: "red" }}></div>
<button
onClick={() => {
setShow(false);
}}
>
Close
</button>
</div>
)}
<div
style={{
display: "flex",
justifyContent: "center"
}}
>
<img
src="https://i.imgur.com/LiAUjYw.png"
alt="test"
style={{
maxWidth: "100%",
height: "auto"
}}
/>
</div>
<button onClick={() => setShow(true)}>SHow</button>
</div>
);
}
It initially looks like this: https://imgur.com/a/R0e74Xk
And on clicking the 'Show' button, it looks like this: https://imgur.com/a/Iy6osio
As you can see the bottom div gets shifted down, and goes over the container div.
I was wondering how I can make the div responsive enough to change its height when the other element is rendered.
I am fairly new to styling so any help on this would be greatly appreciated.
Thank you.
Here's one simple idea. See how the style is given to the divs like so:
<div
style={{
display: "flex",
justifyContent: "center"
}}
>
Note how the style has this weird {{ }} notation. That's because style accepts an object, and the object here is:
{
display: "flex",
justifyContent: "center"
}
You could take that object and save it as a variable somewhere, for example:
const styleWhenShow = {
display: "flex",
justifyContent: "center",
height: "100px"
}
const styleWhenNoShow = {
display: "flex",
justifyContent: "center",
height: "500px"
}
Since you already have your show state, now it's just a matter of replacing the style prop with:
style={show ? styleWhenShow : styleWhenNoShow}
In case you don't want to repeat some common styles between the show and noshow styles, you can also do something like:
const commonStyle = {
display: "flex",
justifyContent: "center"
}
const styleWhenShow = {
height: "100px"
}
const styleWhenNoShow = {
height: "500px"
}
And set the style prop like:
style={show ? { ...commonStyle, ...styleWhenShow } : { ...commonStyle, ...styleWhenNoShow }}

React Spring animation slowing down

I have a react-spring simple rotation animation with adjustable speed. But once I sett the speed to full (setting duration to 10ms) and returning it to lower even 1 second, it wouldn't animate properly and rather gets lagging.
Here is the animation preview
https://3l3kb.csb.app/
And here is the sandbox https://codesandbox.io/s/spring-anim-test-forked-6wno4
And here is the code
export default function App() {
const [reverse, setReverse] = useState(false);
const [speed, setSpeed] = useState(50);
const rotation = useSpring({
from: { transform: "rotate(0deg)" },
to: { transform: "rotate(360deg)" },
loop: true,
reset: true,
config: { duration: 10 + (100 - speed) * 10 }
});
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
{/* <animated.div>
<animated.h1>{num.get().toFixed(2)}</animated.h1>
</animated.div> */}
<div
style={{
width: "300px",
height: "300px",
position: "relative",
margin: "auto"
}}
>
<animated.div
style={{
...{
...rotation,
marginLeft: "auto",
position: "absolute",
color: "purple",
fontSize: "130px"
}
}}
>
T
</animated.div>
</div>
<input
type="range"
value={speed}
onChange={(e) => setSpeed(e.target.value)}
style={{
marginTop: "100px",
width: "500px"
}}
/>
</div>
);
}

React-slick - how to change custom arrow colour based on the page number

There are 2 custom arrows which are previous-arrow and next-arrow
There are also total 3 pages with 3 slides per page
What I want to do is whenever the page is the first page/last page, the previous arrow/next arrow will apply filter in svg, which means the previous arrow/next arrow will become black color
<img
…
filter:
"invert(3%) sepia(7%) saturate(7029%) hue-rotate(94deg) brightness(86%) contrast(93%)"
}}
/>
For example, if it’s the first page, the previous arrow will be filtered while next arrow will NOT be filtered.
Is it possible to do it?
App.js
import "./styles.css";
import React from "react";
import Slider from "react-slick";
import ArrowPrevious from "./arrow-previous.svg";
import ArrowNext from "./arrow-next.svg";
const ArrowButton = ({ imgSrc, imgAlt, onClick }) => {
return (
<button
onClick={onClick}
style={{ backgroundColor: "transparent", border: "none" }}
>
<img
src={imgSrc}
alt={imgAlt}
style={{
width: "50px",
height: "50px",
filter:
"invert(3%) sepia(7%) saturate(7029%) hue-rotate(94deg) brightness(86%) contrast(93%)"
}}
/>
</button>
);
};
export default function App() {
const settings = {
dots: true,
infinite: false,
speed: 500,
slidesToShow: 3,
slidesToScroll: 3,
prevArrow: <ArrowButton imgSrc={ArrowPrevious} imgAlt="previous-button" />,
nextArrow: <ArrowButton imgSrc={ArrowNext} imgAlt="next-button" />,
beforeChange: (current, next) => {
console.log(next);
}
};
return (
<div>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
<div>
<h3>7</h3>
</div>
</Slider>
</div>
);
}
Codesandbox
https://codesandbox.io/s/focused-dubinsky-9onwe?file=/src/App.js
See codesandbox
https://codesandbox.io/s/inspiring-austin-k9i86?file=/src/App.js:510-527
You just have to look for the onClick !== null
I broke your arrows into 2 separate components though i.e. ArrowButtonNext and ArrowButtonPrevious
const ArrowButtonPrevious = ({ imgSrc, imgAlt, onClick }) => {
return (
<button
onClick={onClick}
style={{ backgroundColor: "transparent", border: "none" }}
>
<img
src={imgSrc}
alt={imgAlt}
style={{
width: "50px",
height: "50px",
filter:
onClick === null
? "invert(93%) sepia(7%) saturate(7029%) hue-rotate(94deg) brightness(86%) contrast(93%)"
: "none"
}}
/>
</button>
);
};
const ArrowButtonNext = ({ imgSrc, imgAlt, onClick }) => {
return (
<button
onClick={onClick}
style={{ backgroundColor: "transparent", border: "none" }}
>
<img
src={imgSrc}
alt={imgAlt}
style={{
width: "50px",
height: "50px",
filter:
onClick === null
? "invert(93%) sepia(7%) saturate(7029%) hue-rotate(94deg) brightness(86%) contrast(93%)"
: "none"
}}
/>
</button>
);
};
I have Checked on Code sandbox and inspect the arrow ,you can change only background Color or else you need to import arrow icon from Material UI or Bootstrap

Hide/disable arrow buttons of horizontal scroller in react.js

Hy, I'm trying to disable/hide the arrow buttons of a horizontal scroller on start and end of the scroll.
I tried to use useEffect lifecycle by by setting its dependency document.getElementById('hscroll').scrollLeft, so that i can fire a function on scrollLeft change... but on load it shows an error "Cannot read property 'scrollLeft' of null" which is obviously right.
code is here ... hscroll CodeSandBox
how can I be able to do that?
need your help!
Thank you in advance <3.
You can do that only with useState hook and conditional rendering.
Here's a fully-working solution assuming we know width of the div that wraps your slides:
const HorizontalScroll = () => {
const [slideLeft, setSlideLeft] = useState(0);
const sliderWidth = 1900;
//on arrow click
const moveRight = () => {
const el = document.getElementById(`hscroll`);
setSlideLeft(el.scrollLeft += 200);
};
const moveLeft = () => {
const el = document.getElementById(`hscroll`);
setSlideLeft(el.scrollLeft -= 200);
};
return (
<div className="homepageMargin">
<section style={{ display: "flex", justifyContent: "space-between" }}>
{slideLeft > 0 ? <IconButton onClick={moveLeft}>
<ArrowBackIcon
style={{
paddingTop: ".2rem",
cursor: "pointer"
}}
/>
</IconButton> : <div />}
{slideLeft < sliderWidth ? <IconButton onClick={moveRight}>
<ArrowForwardIcon
style={{
paddingTop: ".2rem",
cursor: "pointer"
}}
/>
</IconButton> : <div />}
</section>
<hr style={{ backgroundColor: "black" }} />
<div class="flex-container" id={`hscroll`}>
{data.map((item) => (
<div style={{ minWidth: "300px" }}>
<img src={item.imgSrc} alt="images" style={{ width: "18rem" }} />
<h6>{item.title}</h6>
</div>
))}
</div>
</div>
);
};
Above example works becouse React component re-render every time you update the state. Also, you can get width of your slider like that:
const sliderWidth = yourRefName.current.style.width;
But it has to be declared explicitly in your CSS.

Categories