Develop Reference

React.js - Styled components - center image in direct div parent with other objects

I understand that question looks pretty easy, but I haven't found anything helping me.
I have an image inside a div, and I want that image to be centered in that div even if I add, for example, a text.
Here is some code and images to better understand that problem :
If I only have my image in my div (with solid border), all is well :
<div>
<img height = '75px' width = '75px' src={USDCoin}/>
</div>
But adding a text, I can't figure out how to keep the image in the center of the div (well aligned with the grey lines) and the text below that :
<div>
<img height = '75px' width = '75px' src={USDCoin}/>
test
</div>
Here is a full example :
<div style = {{display: flex;
flex-direction: row;
height: 90%;
width: 100%;
justify-content: center;
align-items: center;}}>
<Line/>
<div>
<img height = '75px' width = '75px' src={USDCoin}/>
</div>
<Line/>
<Line/>
<div>
<img height = '75px' width = '75px' src={USDCoin}/>
test
</div>
<Line/>
</div>
Thank you in advance for your precious help !

You can use flexbox to do this very easily.
I've created an example here for you (doesn't include styled-components but your issue is not the styled components anyway) https://codesandbox.io/s/solitary-night-7859bz

you should use flex-direction: column;
import { React } from "react";
export default function Demo() {
return (
<>
<div
style={{
display: "flex",
flexDirection: "column",
height: "90%",
width: "100px",
border: "2px solid",
justifyContent: "center",
margin: "0 auto",
alignItems: "center"
}}
>
<div>
<img
height="75px"
width="75px"
src={
"https://images.unsplash.com/photo-1638913662252-70efce1e60a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
}
/>
</div>
<div>test</div>
</div>
</>
);
}

offset (using transform) svg element relative to its own size

I want to offset SVG element relative to its own size using translate with percentage, very similarly to how offset div using transform: translate(100%,0) would work:
this code:
<div style={{ overflow: 'visible', position: 'relative' }}>
{/* rect */}
<div style={{ height: 20, width: 20, background: 'black', position: 'absolute' }} />
{/* circle */}
<div
style={{
height: 20,
width: 20,
background: 'purple',
borderRadius: '50%',
position: 'absolute',
transform: 'translate(100%,0)',
}}
/>
</div>
will look like this
good, the circle offset was relative to its own size
while this case:
<svg overflow={'visible'}>
<rect width={20} height={20} />
<circle cx={10} cy={10} r="10" fill="purple" style={{ transform: 'translate(100%,0px)' }} />
</svg>
will cause this to render:
It's basically being offset relative to the size of the svg canvas(that I never explicitly set):
why does transform: 'translate(100%,0)' work relative to self in div html elements but relative to parent on SVG elements?
already tried:
wrapping g elements, or svg elements similar to other answers on this site.
want to avoid:
I could potentialy solve this by using .getbBox() function and calculate dimensions manually and save it to state and then offset by pixels, but I really want to avoid it and am looking for a simpler solution.
Demo
https://codesandbox.io/s/svg-vs-div-transform-translate-o2ii7

You should set the transform-box to fill-box. For React you use camel case so it looks like this:
style={{ transform: "translate(100%,0px)", transformBox: "fill-box" }}

why is there a gap between view and text input?

I'm getting some gap between my wrapper view and text input, I checked padding and margin but nothing works:
<View style={styles.wrapper}>
<View style={{ width: '100%',height:'10%', backgroundColor: 'yellow' }}></View>
<TextInput style={styles.edit_input}
numberOfLines={15}
multiline={true}
/>
</View>
styling:
wrapper: {
width: '90%',
marginTop: '10%',
backgroundColor: 'gray',
borderTopWidth: 1,
},
edit_input: {
backgroundColor:'white',
color: 'black',
borderWidth: 1,
textAlignVertical: 'top',
width: '90%',
alignSelf: 'center',
},
but this goes away when you replace height:'10%' with height:50
any idea what's causing this? or how to solve this issue using relative units?

I do not recommend using your approach as it tends to behave differently on different devices. For example, your approach looks just as you expect it on web, but shows the gap on mobile devices.
Instead use a flexbox approach. The question is what you actually want to achieve here. You don't set a height on the wrapper or the Textinput. The height of the yellow bar is 10% of what exactly then? That's kind of ambiguous and prone for unexpected design issues. You could do something like this with flex box, if you want your yellow box to be 10% of the TextInput.
export default function App() {
return (
<View style={styles.wrapper}>
<View style={{ width: '100%', flex:1, backgroundColor: 'yellow' }}></View>
<TextInput style={styles.edit_input}
numberOfLines={15}
multiline={true}
/>
</View>
);
}
const styles = StyleSheet.create({
wrapper: {
width: '90%',
marginTop: '10%',
backgroundColor: 'gray',
borderTopWidth: 1,
flex: 1
},
edit_input: {
backgroundColor:'white',
color: 'black',
borderWidth: 1,
textAlignVertical: 'top',
width: '90%',
alignSelf: 'center',
flex: 9
},
});
Note that this approach will fill all the available space while yours didn't. But your only element with a height was TextInput with numberOfLines, which has a different size depending on the users fontscaling etc. So you should not rely on that.

How to add a Badge for an Icon in Ant Design?

I'm using the Icon and Badge from Ant Design. I want to add the Badge for the Icon:
<VscBell
size={30}
style={{ marginRight: '10px', float: 'right' }}
>
<Badge count={5}>
<a href="#" className="head-example" />
</Badge>
</VscBell>
I have import 'antd/dist/antd.css'; imported and the Badge works without the Icon. The Icon is from reacticons and it is displayed properly. I want to add the Badge to the top right of the Icon. But it does not show at all when included in the Icon.

Put them both in a View Tag (if you are react-native) or div
and then take this styles to the badge:
position: absolute;
right: 0px;
top: 0px;
Something like this:
<div>
<VscBell
size={30}
style={{ marginRight: '10px', float: 'right' }}
>
</VscBell>
<Badge count={5} style={{ position: 'absolute', right: 0, top: 0 }}>
<a href="#" className="head-example" />
</Badge>
</div>

How to Crop an Image's Height Without Changing Size and Ratio (React/CSS)

I'm attempting to crop this image in CSS so that the image fills the entire container and stays the same ratio as the original file, without changing the image size any larger than what it needs to fit the container. Just like what photoshop does with the crop tool:
In this example, the images size doesnt change in either direction, and fills the container its in, but the image is cropped on its Y axis from the bottom to the top:
Heres a video example: https://imgur.com/za9IIIW
Here's a simple working code example: https://codesandbox.io/s/epic-frog-vkvxp?file=/src/App.js:0-1402
import React, { useEffect, useState, useRef } from "react";
import "./styles.css";
import img from "./img.jpg";
const appContainerStyle = {
position: "relative",
height: "100vh",
width: "100vw",
backgroundColor: "rgb(70,70,70)"
};
const btnContainerStyle = {
position: "absolute",
height: "100%",
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center"
};
export default function App() {
const [height, setHeight] = useState(100);
const imageStyle = {
position: "absolute",
height: `${height}%`,
width: "100%",
background: `url(${img})`,
backgroundSize: "cover",
backgroundPosition: "top",
backgroundRepeat: "no-repeat"
};
return (
<div style={appContainerStyle}>
<div style={imageStyle}></div>
<div style={btnContainerStyle}>
<button
style={{ height: "50px", width: "100px" }}
onClick={() => {
height > 0 && setHeight(height - 10);
}}
>
Smaller
</button>
<button
style={{ height: "50px", width: "100px" }}
onClick={() => {
height < 100 && setHeight(height + 10);
}}
>
Bigger
</button>
</div>
</div>
);
}
//image is changing size when the height is changed,
//I would like for it to stay the same size, but crop when the height is changed
My problem is that it crops the image sometimes fine, but it also sometimes changes the image size.
The image shouldn't scale in its container, it should only be cropped in the window.
Here's a flawed approach: stillscales
As you can see, the image is cropped until it reaches a point where the image is then being scaled in its container.
Any help would be appreciated!

create an image container with overflow of hidden so this way when you move image it won't show the outside of box.
then you have to set the image position to relative. this helps to move the image from its position without breaking the design.
after that you can give the image left, right, top and bottom positions to set the image position and the overflow will be hidden.
the html:
<div class="image-container">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"/>
</div>
the css:
.image-container {
overflow: hidden;
}
.image-container img {
position: relative;
top: -100px;
}
this is how you crop the image if you need more help ask in the comment for react code

Change the backgroundSize: "cover" to backgroundSize: "150%".
const imageStyle = {
position: "absolute",
height: `${height}%`,
width: "100%",
background: `url(${img})`,
backgroundSize: "150%",
backgroundPosition: "top",
backgroundRepeat: "no-repeat",
};
Codesandbox: https://codesandbox.io/s/admiring-buck-89pv4