Visio React Base

Visio react base a repo designed to contained basic reusable elements in order to build a React app

Installation

yarn:

yarn add visio-react-base

npm:

npm install visio-react-base

Components

We use formik, material ui and yup, all the different form input types are designed to work with these 3 tools and are expected to be inside a formik form.

Input

Component design to represent input fields to users, accepts text and numbers defaulting to "text" if "type" is not passed. For more info see TextField in MUI.

Usage:

import { Input } from 'visio-react-base';

<Input
    name="firstName"
    label="First Name"
    fullWidth
/>

<Input
    name="age"
    label="Age"
    type="number"
    fullWidth
/>

Phone

Component designed to mask input fields as 10 digits US formatted phone numbers. For more info see TextField in MUI.

Usage:

import { Phone } from 'visio-react-base';

<Phone
    name="phone"
    label="phone"
    fullWidth
/>

Currency

Component designed to mask input fields as US formatted currency. Component will send data back to form as a float. We can pass how many decimal points and and max value, by default will be 2 and 9999999999. For more info see TextField in MUI.

Usage:

import { Currency } from 'visio-react-base';

<Currency 
    name="price"
    label="Price"
    decimalPoints={2}
    maxValue={1000}
    fullWidth 
/>

Checkbox

Component designed to display boolean values. Component will send data back as true, false.

Usage:

import { Checkbox } from 'visio-react-base';

<Checkbox name="Adult" label="Adult?" fullWidth />

Select

Component designed to display a combobox from an object of properly formatted options Usage:

import { Select } from 'visio-react-base';

const stateData = [
    { value: "FL", label: "FL" },
    { value: "TX", label: "TX" },
    { value: "CA", label: "CA" },
    { value: "NY", label: "NY" },
];

<Select
    name="State"
    label="State"
    options={stateData}
    fullWidth
 />

Radio

Component designed to display a radio from an object of properly formatted options Usage:

import { Radio } from 'visio-react-base';

const contactMethodData = [
    { value: "Phone", label: "Phone" },
    { value: "Email", label: "Email" },
    { value: "Text", label: "Text" },
];

<Radio
    name="ContactMethod"
    label="Contact Method"
    options={contactMethodData}
/>

CardSelect

Component designed to display a group of clickable cards from an object of properly formatted options. We can also pass images to display a card with text and image. Usage:

import { CardSelect } from 'visio-react-base';

const colorOptions = [
    { value: "Blue", label: "Blue" },
    { value: "Red", label: "Red" },
    { value: "White", label: "White" },
];

const vehicleOptions = [
    { value: "Car", label: "Car", img: "https://carimage.com" },
    { value: "Truck", label: "Truck", img: "https://truckimage.com" },
    { value: "Motorcycle", label: "Motorcycle", img: "https://motoimage.com" },
];

<CardSelect
    name="Color"
    label="Color"
    options={colorOptions}
/>

<CardSelect
    name="vehicle"
    label="Vehicle Type"
    options={vehicleOptions}
/>

Bucket

Component designed to display a group of clickable cards from an object of ranges.

1. lowerValue = higher value, will display value: -{lowerValue: 1, higherValue: 1} => displays "1"
2. lower value = null, will display higher value or lower -{lowerValue: null, higherValue: 10} => displays "10 or lower"
3. higher value = null, will display lower value or higher -{lowerValue: 10, higherValue: null} => displays "10 or higher"
4. higher value > lower value, will display range -{lowerValue: 10, higherValue: 20} => displays "10 - 20"

if we pass displayUnknown = true, it will display a bucket named "unknown"

Usage:

import { Bucket } from 'visio-react-base';

const creditRanges = [
    { lowerValue: null, higherValue: 680, value: 680 },
    { lowerValue: 680, higherValue: 719, value: 719 },
    { lowerValue: 720, higherValue: 759, value: 759 },
    { lowerValue: 760, higherValue: null, value: 760 }
];

<Bucket 
    name="creditScore" 
    label="Credit Range" 
    options={creditRanges} 
    displayUnknown={true} 
/>