Pass context to RAC

[hosmelq]

I am attempting to pass props to the Heading component through context, but the Heading is inside a Dialog, but the context provided by the Dialog component is overwriting it. I am creating my component with its context and passing the props through it to solve this. Then, I pass those props to the base component and let it receive its props through its context.

I would like to know if this is a good approach or if you recommend something else.

I appreciate any help you can give me.

import {createContext, forwardRef} from 'react'
import {
  Heading as RAHeading,
  useContextProps,
  type ContextValue,
  type HeadingProps as RAHeadingProps,
} from 'react-aria-components'
import {tv, type VariantProps} from 'tailwind-variants'

const variants = tv({...})

interface HeadingProps extends RAHeadingProps, VariantProps<typeof variants> {}

export const HeadingContext = createContext<
  ContextValue<HeadingProps, HTMLHeadingElement>
>({})

const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
  function Heading(props, ref) {
    ;[props, ref] = useContextProps(props, ref, HeadingContext)

    const {className, size} = props

    return (
      <RAHeading {...props} className={variants({className, size})} ref={ref} />
    )
  },
)

export default Heading

[snowystinger]

I think you'd want to create your own Context instead of using ours. I think you could get into some trouble accidentally by trying to share ours.

[hosmelq]

That's what I'm doing right now to pass my props. Thank you for your help.