Guides and best practices

Advances usage (tutorials)

For best practices you can consider customizing your component by Qbit's elements. You can implement callable functions or do a customize renderings. you can create or call your custom designed skin. with the Qbit elements you can create high order components easier. You 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;

here are explanations -

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

This line 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.

Explanation of value and onChange in TextInput

value Property: The value property binds the input field's content to the task state. This means:

• The input field always displays the current value of task.
• If task is updated, the input field automatically reflects the new value.

onChange Event Handler: The onChange property listens for 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 element is easier than you think. just extract the required interface from the qbit's com.qbit.Skin for the props. then extract it from the props and use it in your designs as your wish.

here you can get the full knowledge about creating skins and other needed stuffs. custom-skin

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 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

You can access all among the accessibilities by passing through the props