Any way to pass a dynamic element into use-scramble?

[minor]

I'm using a react-live-clock component that's updating the time each second:

<Clock format={"h:mm:ss a"} ticking={true} timezone={"US/Eastern"}/>

I'd like to pass this into use-scramble wrapped around other strings, i.e.:

some text here ∙<Clock format={"h:mm:ss a"} ticking={true} timezone={"US/Eastern"} />∙ some more text here

I'd like the clock to constantly be updating the time as soon as the animation is over. I was thinking about using some placeholder text and replacing the Clock once the animation is done (maybe with an onComplete or something), but I wasn't sure how to calculate when the time would be done animating (since it's in the middle, it wouldn't take the entirety of the duration). Also, I don't think onComplete is supported.

Do you know if this is possible, and if so, how can I do this? Thanks so much — appreciate any help on this!

[tol-is]

Hey @minor

I'm not sure I fully understand what you're trying to achieve, but thought to start a codesandbox with a basic setup and see if I can help you through.

https://codesandbox.io/s/clock-with-scramble-5x7hwv

[minor]

Hey @tol-is, sorry for the lack of clarity in the previous message, and I really appreciate your help on this!

I think what I'm trying to go for is something in the format as shown below, but after the animation occurs (so the animation occurs only once on page-load, and then the clock should tick normally without the animation):

Naturally, I would want to do something like:

const FirstPart = () => {
  const { ref } = useScramble({
    text: "location ∙ " + <CustomClockComp /> + "∙ status"
  });

  return <p ref={ref} />;
};

But, this shows up as the second line in the above screenshot, it doesn't actually render the Clock component, and instead it's just "Object object."

Do you have any ideas on what I could do? Hope I explained this better. Here's the codesandbox with the small edit I tried:
https://codesandbox.io/s/clock-with-scramble-ideal-view-tlqrwc?file=/src/App.jsx:142-294

[tol-is]

Hey @minor

I don't think it will be possible to achieve this with the library you're working with. My hook is maybe too simplistic for react-live-clock

I was able to do something with a different hook-based library, that I think is close to what you're going for. Maybe if you need a more robust clock there is a better library out there, but this recipe could work.

https://codesandbox.io/s/clock-with-scramble-5x7hwv?file=/src/App.jsx

Screen.Recording.2023-10-24.at.20.21.13.mov