get started
Component's type
v.1.0.0 | SaturnThese patterns only affect how the form data is managed and updated. Not all components has the three types.
Components are divided into:
- Uncontrolled
[componentName]UnControlled.tsx
Is the basic component. Are ready to work and don't require further commands or coding. It stores its own state internally. Usually is exported as [componentName].
- Controlled
[componentName]Controlled.tsx
The behavior of the controlled components must be defined by the developers trough the props. A parent component manages its own state and passes the new values as props to the controlled component.
This component will consistently generate styles using the useStyles hook, and then pass them as a prop to the StandAlone component.
When UnControlled is not present, the Controlled component can be exported as [componentName].
- StandAlone
[componentName]StandAlone.tsx
StandAlone components are the core structure of the component, they contains the HTML structure along with its styles.
StandAlone components are not available when importing the Kubit Design System library, if you are curious they can be accessed through our Github.
Usage
The election between them depend on the requirements and objectives of each project. Here we have a summary table:
| UnControlled | Controlled |
|---|---|
| State is indirectly managed. | State is managed via props and other functions. |
| Offer less reusability due to the lack of centralized control. | Can be used across different sections of the project. |
| Less dependent on other components and the global data structure. | Rely on the overarching data structure. |
| Complexity can be increase due to the absence of direct control. | Might exhibit increased complexity due to centralized handling. |
| They possess limited control over form data and values. | Offer enhance control over form data and values. |