@primer/react
Version:
An implementation of GitHub's Primer Design System using React
32 lines (28 loc) • 1.35 kB
JavaScript
import { createContext, useContext } from 'react';
const FormControlContext = /*#__PURE__*/createContext(null);
const FormControlContextProvider = FormControlContext.Provider;
/** This is the private/internal interface for subcomponents of `FormControl`. */
function useFormControlContext() {
var _useContext;
return (_useContext = useContext(FormControlContext)) !== null && _useContext !== undefined ? _useContext : {};
}
/**
* Make any component compatible with `FormControl`'s automatic wiring up of accessibility attributes & validation by
* reading the props from this hook and merging them with the passed-in props. If used outside of `FormControl`, this
* hook has no effect.
*
* @param externalProps The external props passed to this component. If provided, these props will be merged with the
* `FormControl` props, with external props taking priority.
*/
function useFormControlForwardedProps(externalProps) {
const context = useContext(FormControlContext);
if (!context) return externalProps;
return {
disabled: context.disabled,
id: context.id,
required: context.required,
['aria-describedby']: [context.validationMessageId, context.captionId].filter(Boolean).join(' ') || undefined,
...externalProps
};
}
export { FormControlContextProvider, useFormControlContext, useFormControlForwardedProps };