is it possible to animate a strikethrough with React Spring?

Question

I'm new to React Spring and I initially tried this

const strikeProps = useSpring({
    textDecoration: "line-through",
    from: { textDecoration: "none" },
});

But it's not working. I think there should be a way simulate the CSS solution for this.

Answer 1

The problem here is, that the original CSS solution is uses pseudo element for emulating the strike trough. We can only add react-spring properties for normal html elements. So the most compact way is to create a separate strike through component for this problem. For example:

const StrikeTroughtText = ({ children, weight = 1 }) => {
  const props = useSpring({
    from: { width: "0%" },
    to: { width: "100%" }
  });

  return (
    <div style={{ position: "relative", display: "inline-block" }}>
      {children}
      <animated.div
        style={{
          position: "absolute",
          top: "50%",
          left: 0,
          width: props.width,
          height: `${weight}px`,
          background: "black"
        }}
      />
    </div>
  );
};

We basically animate the width of the absolutely positioned div containing a black line over the text.

You can use it like a div component:

<StrikeTroughtText>text</StrikeTroughtText>

For bigger font size the default 1 px line weight is not enough, so I added a weight property also.

Here is my example: https://codesandbox.io/s/react-strike-trought-text-component-with-react-spring-animation-86cfd?file=/src/App.js