How to pass the initial context when it might be null?

[gajus]

I have the same question that this person has:

https://stackoverflow.com/questions/69165955/argument-of-type-null-is-not-assignable-to-parameter-of-type-radiogroupstate

Following the provided example: https://react-spectrum.adobe.com/react-aria/useRadioGroup.html

Users will end up with an error:

Argument of type 'null' is not assignable to parameter of type 'RadioGroupState'.

It seems that one or the other is needed:

• useRadio must accept state as null
• @react-stately/radio must provide a method to create initial RadioGroupState

I've considered just casting the type, i.e.

const state = useContext(RadioContext) as RadioGroupState;

but that's far from ideal since we are partially losing type safety.

I've also considered typing out the initial state myself, i.e.

const RadioContext = createContext<RadioGroupState | null>({
  isDisabled: false,
  isReadOnly: false,
  isRequired: false,
  lastFocusedValue: null,
  name: '',
  selectedValue: null,
  setLastFocusedValue: () => {},
  setSelectedValue: () => {},
  validationState: 'valid',
  // ...
});

but that's far from ideal as well because it keeps changing between versions.

[snowystinger]

It should accept null most likely when we complete the typescript strict mode work.

Edit, looks like we've completed ts strict mode for Radio. We probably just don't run strict mode on the docs examples yet. This is your context, and RadioGroupState is correct, as is null, because ReactContext must take a default value. https://react.dev/reference/react/createContext#parameters

This is the type we've used in our component implementation.

react-spectrum/packages/@react-spectrum/radio/src/context.ts

Line 22 in fa2d591

export const RadioContext = React.createContext<RadioGroupContext | null>(null);