Changing example to React functional components

[helios2003]

Is your feature request related to a problem?

As of 2024, most developers have been using React's functional components instead of Class-based components. Hence understanding the documentation of the library would be easy if components were written using functions. Look at the example here: https://codesandbox.io/embed/o2A4gwXE3

Describe the solution you'd like

Rewriting the examples to functional components.

Describe alternatives you've considered

No response

Additional Context

No response

[jcapogna]

This is especially needed if you're using dynamic components as refs have changed.

An example of how to update dynamic components in a functional component:

const stepsRef = useRef<Steps>(null);

const onBeforeChange = async (nextStepIndex: number) => {
    if (nextStepIndex === 3) {
        await waitForElementToLoad()
        stepsRef.current?.updateStepElement(nextStepIndex)
    }
}

return (
    <Steps
        ...
        onBeforeChange={onBeforeChange}
        ref={stepsRef}
    />
)

[jaimefps]

@jcapogna I've been fighting this for hours. Happy I found your comment. Note that I had to also account for a transition that moves the element across the screen, so I also have a delay in place to account for both te element mounting and the transition being done, pseudo code looks like:

const onBeforeChange = async (nextStepIndex: number) => {
  if (nextStepIndex === 3) {
    induceUiChange()
  
    await waitForElementToLoad()
  
    await delay(1000) // wait for transition to complete
  
    stepsRef.current?.updateStepElement(nextStepIndex)
  }
}

[jcapogna]

@jaimefps Glad it helped. I had to delay for a transition in my use case as well. I trigger an element to appear, which then results in an animation happening.

[hillbilly991]

for anyone who wants to have an idea of what await waitForElementToLoad() could look like, this worked https://stackoverflow.com/a/63519671