Best Practices for Passing Props Through Context

[hosmelq]

Hello guys,

I have a Separator in a Menu and want to pass some props through the context. Still, Menu also provides props via context and overwrites my props, so I created a Separator component with its context that forwards all props to the base component.

I would like to know if this is the best way or if you have any suggestions.

Thank you so much.

import {createContext, forwardRef} from 'react'
import {
  Separator as RACSeparator,
  useContextProps,
  type ContextValue,
  type SeparatorProps,
} from 'react-aria-components'

export const SeparatorContext =
  createContext<ContextValue<SeparatorProps, HTMLElement>>(null)

export const Separator = forwardRef<HTMLElement, SeparatorProps>(
  function Separator(_props, _ref) {
    const [props, ref] = useContextProps(_props, _ref, SeparatorContext)

    return <RACSeparator {...props} ref={ref} />
  },
)

[snowystinger]

Is this different than your previous question? #5046 (comment)

[hosmelq]

I apologize for the redundancy. You are correct; my question was similar to the previous one. I had removed the component from my code and forgot about the earlier discussion. Thank you for pointing it out.

Sorry 😞