CODEWITHSUNDEEP
reactjstypescript
kush1nado
kush1nado

Reputation: 105

How to transfer value from hook to text rotate parameter?

How to transform rotateValue from useEffect in text rotate? Thank you for asnwers.

    var rotateValue = 0

  React.useEffect(() => {

    const tickWidth = refText.current.getBBox().width;
    rotateValue = optimalTextWidth > tickWidth ? 0 : -45

  })

  const refText = React.useRef() as React.MutableRefObject<SVGTextElement>
  const dateTime = !payload.value ? null : DateTime.fromMillis(payload.value)

  return (
    <g className="SVGElem" transform={`translate(${x},${y})`}>
      <text ref={refText} fontFamily="Roboto, sans-serif" transform={`rotate(${rotateValue})`} width={width} height="auto" textAnchor="middle" fontSize={12} fill={fill}>
        <tspan x={0} y={(12).toString()}>{dateTime?.toFormat(FORMAT_DATE)}</tspan>
        <tspan x={0} y={(24).toString()}>{dateTime?.toFormat(FORMAT_TIME_12H)}</tspan>
      </text>
    </g>
  );

Upvotes: 0

Views: 44

Answers (1)

Khaled Ahmed
Khaled Ahmed

Reputation: 1134

put it in the state

const [rotateValue, setRotateValue] = useState(0);

and in the useEffect

setRotateValue(optimalTextWidth > tickWidth ? 0 : -45);

Upvotes: 1

Related Questions