Library Component API

Component API

HTMLElement attributes

Every component in Koval library supports following props, which mimic native HTMLComponent props. Full set of WAI-ARIA attributes is supported as well.

import type {AriaAttributes, HTMLAttributes} from 'react';
 
export type LibraryProps = AriaAttributes & {
    id?: string;
    /**
     * Set native ARIA role attribute
     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
     */
    role?: HTMLAttributes<HTMLElement>['role'];
    /**
     * Specify additional CSS class. This allows you to use styled(Component)
     * or the css prop in styled-components or emotion.
     */
    className?: HTMLAttributes<HTMLElement>['className'];
};

data- attributes

Each component supports free from data-${string} attributes. The value type should be string;

import {Button} from 'koval-ui';
 
<Button data-foo="bar" />;

React references

Developer can provide a React reference for each component.

import {useRef} from 'react';
import {Button} from 'koval-ui';
 
const ref = useRef<HTMLButtonElement>(null);
 
<Button ref={ref} />;
ThemeGrid