1

I am building an animated progress bar component in React, that uses styled-components & react-spring to animate width.

I am not sure, if this is a correct approach, but how can I get width property from a spring to pass it as a prop to styled component ?

import styled from "styled-components";
import { useSpring, } from "react-spring";

const StyledProgress = styled.div`
  height: 2px;
  ${(props) => console.log('how to access spring value here ?')}
  position: absolute;
  left: 0;
  bottom: -22px;
  transition: width 0.3s;
  background: black;
  display: flex;
  flex-direction: row-reverse;
  &::after {
    content: " ";
    width: 8px;
    height: 8px;
    background: white};
    display: block;
    border-radius: 50%;
    border: 2px solid red;
    position: absolute;
    top: -5px;
    right: -5px;
  }
`;

const Progress: FunctionComponent = ({
  progress,
}) => {
  const styles = useSpring({
    from: { width: "0%" },
    width: `${progress}%`,
    config: {
      tension: 50,
      friction: 9,
    },
    delay: 300,
  });
  return <StyledProgress style={styles} />;
};
export default Progress;
Michał Lach
  • 1,291
  • 4
  • 18
  • 37
  • Are you not able to access `props.style`? – Drew Reese May 28 '21 at 22:23
  • when I do something like this inside styled component: ```width: ${(props) => props.style.width}%;``` it gets converted into ```width: [object Object];``` – Michał Lach May 28 '21 at 22:31
  • https://codesandbox.io/s/infallible-brook-ls3j4?file=/src/Progress.tsx If your goal is to animate the width in react-spring, I don't think you need to access the width in the style sheet. – Dan Kreiger May 28 '21 at 23:29

0 Answers0