react-tsdx-component-library

TSDX React User Guide

Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it.

This TSDX setup is meant for developing React component libraries (not apps!) that can be published to NPM. If you’re looking to build a React-based app, you should use create-react-app, razzle, nextjs, gatsby, or react-static.

If you’re new to TypeScript and React, checkout this handy cheatsheet

Example Snippets

import {TextField, isValidUSZip} from 'react-tsdx-component-library';

function Form() {
const [zipCode, setZipCode] = useState('');

return < TextField
   key="zip"
   placeholder="Enter your zip code"
   defaultValue={zipCode}
   value={zipCode}
   type="zip"
   name="zipCode"
   data={zipCode}
   setData={setZipCode}
   error={!isValidUSZip(zipCode)}
   disabled
/>;
>
< TextField
   key="zip"
   placeholder="Enter your zip code"
   defaultValue={zipCode}
   value={zipCode}
   type="zip"
   onChangeRetZip={value =>
     setZipCode(value)
      }
   error={!isValidUSZip(zipCode)}
   disabled
/>;
}

type = | 'tel' => (xxx)xxx-xxx (numeric)
| 'email'
| 'zip' => xxxxx (numeric)
| 'postalCode' => K8N5W6 (aplha-numeric)
| 'url'
| 'ssn' => xxx-xx-xxxx (numeric)
| 'accountno'
| 'routingno' => 9 digit number
| 'name'
| 'cardno'
| 'cvvno' => 3 digit cvv number
| 'jerseyNumber' => 0-99 (any number between 0 to 99)
| 'titleNotes'
| 'percentage' => 0-100 upto 2 decimal places.
| 'password' => masked character *