DOCSEARCHbyAlgolia
Submit Docs

Koval UI Documentation

website·Indexed 31 days ago

https://koval.support

A UI component library featuring a responsive grid system, internationalized formatting components (DateTime, Number, NameLanguage), and a robust DataTable with filtering and sorting. It includes built-in themes like Podil, Dnipro, and Dovzhenko, and provides integration guides for React Hook Form and Formik.

Tokens
28.3K
Snippets
153
Records
212
Agent score
56%

What's inside Koval UI

  1. Overview of Koval DataTable capabilities

    The DataTable component is a grid designed for displaying, editing, and sorting large tabular datasets. It is capable of handling more than 50,000 rows efficiently by utilizing virtualization, pagination, and customizable processing models to ensure accessibility and performance.

  2. Overview of Koval Number Formatting Components

    Koval provides a set of locale-aware components based on Intl.NumberFormat to ensure consistent number formatting across different languages. The available components are:

    • NumberDecimal: General purpose numeric formatting.
    • NumberPercent: Formats values as percentages (multiplies value by 100).
    • NumberCurrency: Formats values as currency strings using ISO 4217 codes.
    • NumberUnit: Formats values with localized unit names (ECMA standard).

  3. Manage input groups with InputGroup

    The InputGroup component is used to wrap InputCheckbox or InputRadio components. It ensures that the name, required, and disabled states are consistently applied to all child inputs and manages the rendering of a shared group label and hint for better accessibility and UX.

  4. Use the Text component for universal HTML styling

    The Text component from koval-ui is a container designed to apply consistent, uniform styling to a wide range of standard HTML elements. It is specifically intended for formatting content generated by CMS or WYSIWYG editors, removing the need to style individual HTML elements manually. It supports elements such as headers (h1-h6), paragraphs (p), lists (ul, ol), blockquotes, definition lists (dl), and various inline elements like strong, em, mark, small, sub, sup, kbd, and code.
    import { Text } from 'koval-ui';

function Example() {
  return (
    <Text>
      <h1>Header 1</h1>
      <p>
        This is a paragraph with <strong>bold</strong>, <em>italic</em>, 
        and <code>code</code> elements.
      </p>
      <ul>
        <li>Unordered item 1</li>
        <li>Unordered item 2</li>
      </ul>
      <blockquote>
        Quote content
        <cite>Author</cite>
      </blockquote>
    </Text>
  );
}

  5. Use the Koval UI Iframe component

    The Iframe component is a utility wrapper around HTMLIFrameElement that provides responsive sizing and a structured configuration for sandbox and permission policies. To render the iframe, developers must provide the width and height props.
    <Iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  width={560}
  height={315}
  referrerPolicy="strict-origin-when-cross-origin"
  allowFullScreen={true}
  name="video-player"
  title="YouTube video player"
/>

  6. Use the TextToSpeech component in Koval UI

    The TextToSpeech component (introduced in Koval UI v0.20.x) allows developers to implement text-to-speech functionality by utilizing the browser's native SpeechSynthesis API to read text using the system synthesizer.

  7. Use the Progress component to show task completion

    The Progress component is a visual indicator used to provide feedback to users about the status of ongoing operations, such as file uploads, downloads, or form submissions. It supports both determinate progress (where a specific value is known) and indeterminate progress (where the completion percentage is unknown).
    import { Progress } from 'koval-ui';

function Example() {
  return (
    <>
      {/* Determinate progress: shows 33% completion */}
      <Progress label="Determinate progress" value={33} max={100} variant="plain" />
      
      {/* Indeterminate progress: omit the value prop */}
      <Progress label="Indeterminate progress" max={100} variant="plain" />
    </>
  );
}

  8. Manage Koval UI style priority with custom CSS layer orchestration

    For complex applications or enterprise design systems, Koval UI can be integrated into a custom layer architecture. By defining a layer order at the top of the main stylesheet, you can control the interaction between application styles and the library. In CSS layers, the layer declared last takes precedence (wins).

  9. Implement loading placeholders with Skeleton components

    The Skeleton component suite provides placeholders that mimic the structure of content being loaded, improving perceived performance by showing a layout preview. The suite includes specialized components like SkeletonFrame, SkeletonShape, SkeletonText, and SkeletonAction to build complex loading states (e.g., mimicking a Card component).
    import { SkeletonFrame, SkeletonShape, SkeletonText, SkeletonAction } from 'koval-ui';

function Example(props) {
  return (
    <SkeletonFrame width={480}>
      <SkeletonShape height={240} />
      <SkeletonText />
      <SkeletonAction double={true} />
    </SkeletonFrame>
  );
}

  10. Use FormField to wrap form inputs for accessibility

    The FormField component enhances the accessibility and usability of form inputs by wrapping an input element or an InputGroup. It automatically handles the rendering of a label above the input and a hint below it.
    import { FormField, InputColor } from 'koval-ui';

function Example(props) {
  return (
    <FormField required={true} label="Field label" hint="This is input hint">
      <InputColor defaultValue="#CECECE" />
    </FormField>
  );
}

  11. Implement interactive actions in floating components

    Koval UI provides an Actions API to add clickable items to floating components such as Toast, Dialog, and Menu. Actions are defined as configuration objects and passed to the actions prop of these components.

  12. Use the Form component to manage input state

    The Form component wraps a set of input components to manage their combined values in a single state and facilitate data submission. It is compatible with the native HTMLFormElement, allowing it to be integrated into standard web workflows.