We Keep Coding

How to build progress bar with circle at the end of bar?

I need to build horizontal progress bar with circle at the end in react js, as shown in picture. I am able to build progress bar with custom "%", now I want to add circle at the end with some text inside.
code for progress bar with custom "%":
codesandbox

Change progress bar component to:
<div style={containerStyles}>
<div style={fillerStyles}>
<div style={circleStyles}>{circleText}</div>
</div>
</div>
And add this styles to the component:
const circleStyles = {
display: "flex",
position: "absolute",
right: "0",
width: "50px",
height: "50px",
background: "blue",
top: "-60%",
borderRadius: "50px",
justifyContent: "center",
alignItems: "center",
color: "white"
};
And here's the App.js:
export default function App() {
return (
<div className="App">
<ProgressBar
bgcolor={item.bgcolor}
completed={item.completed}
circleText={"100%"}
/>
</div>
);
}

add a span under container div and put this style to it
<div style={containerStyles}>
<div style={fillerStyles}></div>
<span style={circleStyle}>{text}</span>
</div>
style
const circleStyle = {
height: 40,
width: 40,
position: "absolute",
right: 0,
backgroundColor: bgcolor,
borderRadius: "50%",
top: -10,
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "white"
};
and then put this to containerStyle
position: "relative",

Move react component to another component

I'm working on a react. The code below is an example. ArrayExample is mapped and returned to the div component. Whenever I click the mapped div component, I want to change the value of the top of div (position: 'absolute') and place it on the right side according to the mapped div topBorder. Is there a way? I want to move it smoothly like an animation.
import React from "react";
const sample = () => {
const arrayExample = ["AAAA", "BBBB", "CCCC"];
return (
<div
style={{
display: "flex",
flexDirection: "column",
width: "100%",
height: "500px",
alignItems: "center",
justifyContent: "center",
backgroundColor: "#f3f3f3",
}}
>
{arrayExample.map((v, i) => {
return (
<div
style={{
width: "50%",
padding: 50,
border: "1px solid black",
marginTop: 15,
}}
onClick={() => {
console.log("Event!")
}}
>
{v}
</div>
);
})}
<div style={{position: 'absolute', top: 70, right: '22%', backgroundColor: "#4285F4", width: 50, height: 150, borderRadius: 5}}>
moving screen(I want to Change top value)
</div>
</div>
);
};
export default sample;

On click of the item div, you need to figure out the distance of that div from the top, and then change the top css property of your right div according to that. To find this distance you can use offsetTop property. For animation you can use transition property. Here is the code:
import React, { useRef } from "react";
const Sample = () => {
const arrayExample = ["AAAA", "BBBB", "CCCC"];
const rightDiv = useRef();
const itemClickHandler = (i) => {
const newTopHeight = document.getElementById("container").children[i].offsetTop;
rightDiv.current.style.top = newTopHeight + 'px';
}
return (
<div
id="container"
style={{
display: "flex",
flexDirection: "column",
width: "100%",
height: "500px",
alignItems: "center",
justifyContent: "center",
backgroundColor: "#f3f3f3",
}}
>
{arrayExample.map((v, i) => {
return (
<div
key={i}
style={{
width: "50%",
padding: 50,
border: "1px solid black",
marginTop: 15,
}}
onClick={() => itemClickHandler(i)}
>
{v}
</div>
);
})}
<div
ref={rightDiv}
style={{
position: 'absolute',
top: 70,
right: '22%',
backgroundColor: "#4285F4",
width: 50,
height: 150,
borderRadius: 5,
transition: "top 0.5s ease-in-out"
}}>
moving screen(I want to Change top value)
</div>
</div>
);
};
export default Sample;
You can see this in action here: https://codesandbox.io/s/thirsty-curie-7mskj

In your click handler you can get the current position of the clicked div in px, you can easily google how to do this this (relative to the page, not the viewport). I would suggest storing this value in state, call it something like activeItemOffsetTop, then just set top to the current state

Have text above icon in React JS

I am learning React and I came across a youtube video that teaches how to use spinners.
https://www.youtube.com/watch?v=T3L4zQnLrVA
I've written the code inside of codesandbox.io here:
https://codesandbox.io/s/late-thunder-sise4?fontsize=14&hidenavigation=1&theme=dark
Now if you click on the "Fake Fetch" button, you'll see the word "Text" in black to the left of the spinner and I was wondering how I could get the word above the spinner.
Thanks for the help!

Just add the following style to your h3 with Text
<h3 style={{ position: 'absolute', top: '250px' }}>Text</h3>
https://codesandbox.io/s/nifty-borg-k3d2u
FWIW - in the future try to use StackOverflow's code snippets, since links to codesandbox aren't guaranteed to exist in the future in case someone else can benefit from your question.

You can use flex to achieve this. In your styled styles, use:
display: "flex",
flexDirection: "column"
So your entire style would be:
const styled = props.overlay
? {
background: "rgba(0, 0, 0, 0.5)",
height: "100vh",
width: "100vw",
position: "fixed",
display: "flex",
flexDirection: "column"
}
: null;
Keep in mind the style above is only applied when the overlay is selected. Otherwise you don't apply any special styles to the Spinner (because they styles are null).
If you want the Text and Spinner stacked for both overlay and non-overlay, use:
const styled = props.overlay
? {
background: "rgba(0, 0, 0, 0.5)",
height: "100vh",
width: "100vw",
position: "fixed",
display: "flex",
flexDirection: "column"
}
: {
display: "flex",
flexDirection: "column"
};
Here's the full working example - https://codesandbox.io/s/proud-frost-3zjob

This definately works. Add some flex properties such as:
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
If you use the styles as such, it works perfectly.
import React from "react";
import SpinnerIcon from "./SpinnerIcon";
import "./Spinner.css";
const Spinner = props => {
return (
<div className="Spinner" style={{
background: "rgba(0, 0, 0, 0.5)",
position: "fixed",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}>
<h3 style={{ margin: 0 }}>Text</h3>
<SpinnerIcon />
</div>
);
};
export default Spinner;
Check this fiddle

Scaling image dimension

I have an image that should cover the dimension of the screen, how can I do?
logoPor: {
alignItems: 'flex-end',
resizeMode: 'cover',
height:40,
justifyContent: "center",
}
In this way the image resulting zooming and only a part is showed.

I have resolved using:
logoPor: {
alignItems: 'flex-end',
resizeMode: "stretch",
justifyContent: "center",
height: 50,
width: 350,
borderWidth: 1
}

Align text center on mui's textfield

Here is what I want:
Here is my result:
I try to assign the style to my input props, but no luck, any ideas? Thanks.
<TextField
key={'verifyKey_'+i}
multiline={false}
InputProps={{
textAlign: 'center',
disableUnderline: true,
style: {
color: 'red',
textAlign: 'center'
}
}}
style={{
height: '50px',
width: '50px',
textAlign: 'center',
justifyContent: 'center'}}/>

Using flexbox and replace textAlign: 'center' with alignItems: 'center':
{
height: '50px',
width: '50px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}

Your code is essentially correct, you just need to lower case "InputProps" to "inputProps". Casing is important here.
inputProps={{ style: {textAlign: 'center'} }}
See also https://github.com/mui/material-ui/issues/5139

You are using
width: '50px'
But you had it to 100%
width: '100%'
To make textAlign property worked properly..
If above wouldn't worked then add one more style to specify more precise
display:block for your text field.