Important! : All React Components Docs are Explaining Only The component and its Properties if you want to know how the structure behind the component work you have to read the regular docs for the component
Important! : All React Components Have a Custom Class and ID Property { className=”..” & id=”..” } to allow you easy customize/manipulate/override the component.
Form Controls
Tornado provide a nice simple yet powerful form controls components for react js and you can import it and use like the code below and the component allows you to create any type of form control input[all types], select, textarea and by default it creates none-type input control.
/*======> Tornado Grid System <======*/
import {FormControl} from './React/FormControl';
/*=====> Usage Case <=====*/
const usage = () => {
return <FormControl></FormControl>;
}General Properties
this an example of creating input control with the general properties that is shared across all form controls and the component accepts any event type and any extra attributes like data-attributes or Events attributes etc.
/*=====> Usage Case <=====*/
const usage = () => {
//===> Change Handler <===//
function chHandler () {
const eventTarget = event.target as HTMLInputElement;
console.log(eventTarget.value);
}
//===> Render Control
return <FormControl
type="text" //===> Control Type
size="large" //===> Control Size
name="control value" //===> Control Name
placeholder="fullname" //===> Control Placeholder
onChange={chHandler} //===> onChange Event
onInput={chHandler} //===> onInput Event
onFocus={chHandler} //===> onFocus Event
onClick={chHandler} //===> onClick Event
onBlur={chHandler} //===> onBlur Event
/>
}