Guides and Best Practices

Advance usage (Tutorials)

You can consider customizing your Qbit Design elements. You can implement callable functions or do a customize rendering. You can create or call your custom skin With the Qbit Design elements you can create high order components easily. Your renderer also can have the SVGs, or it can be designed with tailwind, bootstrap, pure css or any of your desired stylings.

Consider this component for an example -

import React, { useState } from 'react';
import { TextInput } from '@components/inputs';
import TodoSkinTextInput from './skins/TextInput.skin.todo';

const TodoForm = () => {
    const [task, setTask] = useState<string>('');

    const handleAddTodo = (e: React.FormEvent) => {
        e.preventDefault();
    };

    return (
        <form className="mt-8" onSubmit={handleAddTodo}>
            <label htmlFor="todo" className="text-sm/6 font-medium text-gray-900">
                Todo
            </label>
            <TextInput
                type="text"
                name="todo"
                id="todo"
                autoComplete="off"
                placeholder="Enter your todo"
                required
                value={task}
                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTask(e.target.value)}
            />
        </form>
    );
};

export default TodoForm;

Explanation

const [task, setTask] = useState<string>('');

This statement creates a state variable in React to store and update the user's input.

How It Works:

• task: Holds the current value of the state. Initially, it's an empty string ('').
• setTask: A function used to update the task state when the user types in the input field.
• useState<string>: A React Hook that manages state in functional components. The <string> type ensures the task variable only holds string values.

value and onChange in TextInput

value Property

The value property connects the input field to the task state:

• It ensures the input field always displays the latest task value.
• Any update to task is immediately reflected in the input field.

onChange Event Handler

The onChange property detects changes in the input field and updates the task state accordingly.

How It Works:

• When the user types into the input field, the onChange function is triggered.
• setTask(e.target.value) updates the state with the user's input (e.target.value).

Combined Functionality: By using value and onChange together:

1. The input field is always synchronized with the task state.
2. The app can react to user input in real time.

• value={task} ensures the input field displays the current state.
• onChange updates the state as the user types.

Creating a simple skin practices

Creating the renderer for your elements is easier than you think. Just extract the required interface from the Qbit Design's com.qbit.Skin for the props. Then extract it from the props and use it in your designs as your wish.

Refer customization section for custom skin development.

Accessibility of components

In the context of a React project, accessibility refers to designing and developing components in a way that makes them usable by as many people as possible, including individuals with disabilities. Accessibility ensures your application is inclusive and adheres to standards such as the Web Content Accessibility Guidelines (WCAG). According to that the Qbit Design have the following accessibilities for the usage.

• A11y probs
  • role = optional, string
  • title = optional, string
  • tabIndex = optional, number
  • aria-label = optional, string
• Style props
  • classNames = optional, string
  • style = optional, React.CSSProperties
• Base props
  • value = optional, any
  • name = optional, string
  • disabled = optional, boolean
  • keyExtractor = its passed as object to set the each children unique

here are the Events listed for access throw props

• MouseEvents
  • onClick
  • onMouseDown
  • onMouseUp
  • onMouseEnter
  • onMouseLeave
• KeyboardEvents
  • onKeyDown
  • onKeyPress
  • onKeyUp
• UiEvents
  • onChange
  • onFocus
  • onBlur
• FormEvents
  • onSubmit
  • onReset