Trails Packages
    Preparing search index...

    Function useCommonComponentProps

    • A helper hook that computes react properties for the topmost container in a public react component.

      Example:

      function MyComponent(props) {
          const { containerProps } = useCommonComponentProps("my-component", props);
          // automatically applies css classes and testid
          return <Box {...containerProps}>Content</Box>;
      }

      Parameters

      • componentClassName: string
      • props: CommonComponentProps

        Common properties supported by all public react components.

        This type allows for the customization of

        • the css className
        • a Chakra css property
        • "role" and aria-* properties
        • arbitrary data-* properties

        Prop types for react components typically inherit from this interface.

        • [key: `data-${string}`]: unknown

          Arbitrary data attributes.

          NOTE: The component may use data properties for its own behavior. Make sure not to overwrite required attributes.

        • OptionalclassName?: string

          Additional class name(s).

        • Optionalcss?: SystemStyleObject | SystemStyleObject[]

          Custom style rules using Chakra's style objects.

        • Optionaldata-testid?: string

          Used for testing.

        • Optionalrole?: AriaRole

          Custom ARIA role.

      Returns { containerProps: CommonComponentContainerProps }

    Settings

    Member Visibility