6.5.7 • Published 2 years ago

@shiplux/form-sdk-react v6.5.7

Weekly downloads
-
License
ISC
Repository
-
Last release
2 years ago

shiplux-form-library

Tutorial

a library to do forms faster

This library works with react and tailwind.

npm install shiplux/form-sdk

You will need the form props to create the form. this is an example:

Props example

const formProps = {
background: "#D7E9FF",
color: "",
title: "International car shipping quote",
description: "Get a detailed price instantly after complete all data. No annoying calls and additional sales!",
titleSize: 32,
width: 392,
height: 468,
numberStep: false,
isPagination: true,
pagination: {
  bgActive: "#4E91FF",
  bg: "#738CB6",
  color: "#ffffff",
},
isInternational: true,
international: {
  bg: "#ffffff",
  bgActive: "#BAD5F7",
  color: "#000000",
  borderColor: "#4E91FF",
},
steps: [
  {
    steps: [
      {
        label: "Pick Up",
        placeholder: "Select a country",
        name: "pickup",
        validations: { required: true },
        location: {
          cityZipLookup: true,
        },
      },
      {
        label: "Delivery",
        placeholder: "Select a country",
        name: "delivery",
        validations: { required: true },
        location: {
          cityZipLookup: true,
        },
      },
      {
        label: "Ship date",
        placeholder: "MM/DD/YYYY",
        name: "shipdate",
        type: "date",
      },
      {
        label: "Transport Type",
        select: true,
        name: "TransportType",
        options: [
          {
            label: "Open",
            value: 0,
          },
          {
            label: "Enclosed",
            value: 1,
          },
        ],
        validations: {
          required: true,
        },
      },
    ],
  },
  {
    title: "Step 2: Vehicles",
    isAddVehicle: true,
    isVehicleStep: true,
    steps: [
      {
        placeholder: "Type a year",
        name: "vehicleYear",
        type: "number",
        validations: {
          required: true,
        },
      },
      {
        placeholder: "Type a vehicle",
        name: "vehicleMake",
        validations: {
          required: true,
        },
      },
      {
        placeholder: "Type a model",
        name: "vehicleModel",
        validations: {
          required: true,
        },
      },
      {
        select: true,
        name: "VehicleType",
        options: [
          {
            label: "Car",
            value: "car",
          },
          {
            label: "Suv",
            value: "SUV",
          },
          {
            label: "Pickup",
            value: "pickup",
          },
          {
            label: "Van",
            value: "van",
          },
        ],
        validations: {
          required: true,
        },
      },
    ],
  },
  {
    title: "Step 3: People",
    steps: [
      {
        label: "Transport Running",
        select: true,
        name: "VehicleRunning",
        options: [
          {
            label: "Yes",
            value: 0,
          },
          {
            label: "No",
            value: 1,
          },
        ],
        validations: {
          required: true,
        },
      },
      {
        label: "First Name",
        placeholder: "Your Name",
        name: "firstName",
        validations: {
          required: true,
        },
      },
      {
        label: "Email",
        placeholder: "Your Email",
        name: "email",
        validations: {
          required: true,
        },
      },
      {
        label: "Phone Number",
        placeholder: "Your Phone",
        name: "phoneNumber",
        validations: {
          required: true,
        },
      },
    ],
  },
],
};

Sandbox:

https://codesandbox.io/s/form-sdk-shiplux-fjr35d

API:

Form

NameTypeOptional
backgroundstringYes
colorstringYes
placeholder_colorstringYes
titlestringYes
descriptionstringYes
titleSizenumberYes
widthnumberYes
heightnumberYes
stepsArray<{Step}>No
numberStepbooleanYes
isPaginationbooleanYes
paginationObject<Options>Yes
isInternationalbooleanYes
internationalObject<Options>Yes
inputOutlinebooleanYes
queryParamsstringYes
inlineInputbooleanYes
inputWidthnumberYes
buttonWidthnumberYes

Options

NameTypeOptional
bgActivestringNo
bgstringNo
colorstringNo
borderColorstringNo
firstTitlestringYes
secondTitlestringYes
isCoverbooleanYes
isBottombooleanYes

Step

NameTypeOptional
stepsArray<Input>No
titlestringYes
isAddVehiclebooleanYes
isVehicleStepbooleanYes
isshippingMethodbooleanYes

Input

NameTypeOptional
labelstringYes
placeholderstringYes
namestringNo
LocationObject<Location>No
selectbooleanYes
optionsArray<Option>Yes
validationsObject<Validation>Yes
typeinput typesYes
vehicleYearbooleanYes
vehicleMakeAPIbooleanYes
vehicleModelAPIbooleanYes

Option

NameTypeOptional
labelstringNo
Valuestring or numberNo
defaultValuestring or numberYes

Validation

NameTypeOptional
requiredbooleanYes
minnumberYes
maxnumberYes

Location

NameTypeOptional
cityZipLookupbooleanYes
autoCompletebooleanYes
6.5.7

2 years ago

6.5.6

2 years ago

6.5.5

2 years ago

6.5.4

2 years ago

6.5.3

2 years ago

6.5.2

2 years ago

6.5.1

2 years ago

6.5.0

2 years ago

6.4.9

2 years ago

6.4.8

2 years ago

6.4.7

2 years ago

6.4.6

2 years ago

6.4.5

2 years ago

6.4.4

2 years ago

6.4.3

2 years ago

6.4.2

2 years ago

6.4.1

2 years ago

6.4.0

2 years ago

6.3.9

2 years ago

6.3.8

2 years ago

6.3.7

2 years ago

6.3.6

2 years ago

6.3.5

2 years ago

6.3.4

2 years ago

6.3.3

2 years ago

6.3.2

2 years ago

6.3.1

2 years ago

6.3.0

2 years ago

6.2.9

2 years ago

6.2.8

2 years ago

6.2.7

2 years ago

6.2.6

2 years ago

6.2.5

2 years ago

6.2.4

2 years ago

6.2.3

2 years ago

6.2.2

2 years ago

6.2.1

2 years ago

6.2.0

2 years ago

6.1.9

2 years ago

6.1.8

2 years ago

6.1.7

2 years ago

6.1.6

2 years ago

6.1.5

2 years ago

6.1.4

2 years ago

6.1.3

2 years ago

6.1.2

2 years ago

6.1.1

2 years ago

6.1.0

2 years ago

6.0.9

2 years ago

6.0.8

2 years ago

6.0.7

2 years ago

6.0.6

2 years ago

6.0.5

2 years ago

6.0.4

2 years ago

6.0.3

2 years ago

6.0.2

2 years ago

6.0.1

2 years ago

6.0.0

2 years ago

5.9.9

2 years ago

5.9.8

2 years ago

5.9.7

2 years ago

5.9.6

2 years ago

5.9.5

2 years ago

5.9.4

2 years ago

5.9.3

2 years ago

5.9.2

2 years ago

5.9.1

2 years ago

5.9.0

2 years ago

5.8.9

2 years ago

5.8.8

2 years ago

5.8.7

2 years ago

5.8.6

2 years ago

5.8.5

2 years ago

5.8.4

2 years ago

5.8.3

2 years ago

5.8.2

2 years ago

5.8.1

2 years ago

5.8.0

2 years ago

5.7.9

2 years ago

5.7.8

2 years ago

5.7.7

2 years ago

5.7.5

2 years ago

5.7.4

2 years ago

5.7.3

2 years ago

5.7.2

2 years ago

5.7.1

2 years ago

5.7.0

2 years ago

5.6.9

2 years ago

5.6.8

2 years ago

5.6.7

2 years ago

5.6.6

2 years ago

5.6.5

2 years ago

5.6.4

2 years ago

5.6.3

2 years ago

5.6.2

2 years ago

5.6.1

2 years ago

5.6.0

2 years ago

5.5.9

2 years ago

5.5.8

2 years ago

5.5.7

2 years ago

5.5.6

2 years ago

5.5.5

2 years ago

5.5.4

2 years ago

5.5.3

2 years ago

5.5.2

2 years ago

5.5.1

2 years ago

5.5.0

2 years ago

5.4.9

2 years ago

5.4.8

2 years ago

5.4.7

2 years ago

5.4.6

2 years ago

5.4.5

2 years ago

5.4.4

2 years ago

5.4.3

2 years ago

5.4.2

2 years ago

5.4.1

2 years ago

5.4.0

2 years ago

5.3.9

2 years ago

5.3.8

2 years ago

5.3.7

2 years ago

5.3.6

2 years ago

5.3.5

2 years ago

5.3.4

2 years ago

5.3.2

2 years ago

5.3.1

2 years ago

5.3.0

2 years ago

5.2.9

2 years ago

5.2.8

2 years ago

5.2.7

2 years ago

5.2.6

2 years ago

5.2.5

2 years ago

5.2.4

2 years ago

5.2.3

2 years ago

5.2.2

2 years ago

5.2.1

2 years ago

5.2.0

2 years ago

5.1.9

2 years ago

5.1.8

2 years ago

5.1.7

2 years ago

5.1.6

2 years ago

5.1.5

2 years ago

5.1.4

2 years ago

5.1.3

2 years ago

5.1.2

2 years ago

5.1.1

2 years ago

5.1.0

2 years ago

5.0.9

2 years ago

5.0.8

2 years ago

5.0.7

2 years ago

5.0.6

2 years ago

5.0.5

2 years ago

5.0.4

2 years ago

5.0.3

2 years ago

5.0.2

2 years ago

5.0.1

2 years ago

5.0.0

2 years ago

4.9.9

2 years ago

4.9.8

2 years ago

4.9.7

2 years ago

4.9.6

2 years ago

4.9.5

2 years ago

4.9.4

2 years ago

4.9.3

2 years ago

4.9.2

2 years ago

4.9.1

2 years ago

4.9.0

2 years ago

4.8.9

2 years ago

4.8.8

2 years ago

4.8.7

2 years ago

4.8.6

2 years ago

4.8.5

2 years ago

4.8.4

2 years ago

4.8.3

2 years ago

4.8.2

2 years ago

4.8.1

2 years ago

4.8.0

2 years ago

4.7.9

2 years ago

4.7.8

2 years ago

4.7.7

2 years ago

4.7.6

2 years ago

4.7.5

2 years ago

4.7.4

2 years ago

4.7.3

2 years ago

4.7.2

2 years ago

4.7.0

2 years ago

4.6.9

2 years ago

4.6.8

2 years ago

4.6.7

2 years ago

4.6.6

2 years ago

4.6.5

2 years ago

4.6.4

2 years ago

4.6.3

2 years ago

4.6.2

2 years ago

4.6.1

2 years ago

4.6.0

2 years ago

4.5.9

2 years ago

4.5.8

2 years ago

4.5.7

2 years ago

4.5.6

2 years ago

4.5.5

2 years ago

4.5.4

2 years ago

4.5.3

2 years ago

4.5.2

2 years ago

4.5.1

2 years ago

4.5.0

2 years ago

4.4.9

2 years ago

4.4.8

2 years ago

4.4.7

2 years ago

4.4.6

2 years ago

4.4.5

2 years ago

4.4.4

2 years ago

4.4.3

2 years ago

4.4.2

2 years ago

4.4.1

2 years ago

4.4.0

2 years ago

4.3.9

2 years ago

4.3.8

2 years ago

4.3.7

2 years ago

4.3.6

2 years ago

4.3.5

2 years ago

4.3.4

2 years ago

4.3.3

2 years ago

4.3.2

2 years ago

4.3.1

2 years ago

4.3.0

2 years ago

4.2.9

2 years ago

4.2.8

2 years ago

4.2.7

2 years ago

4.2.6

2 years ago

4.2.5

2 years ago

4.2.4

2 years ago

4.2.3

2 years ago

4.2.2

2 years ago

4.2.1

2 years ago

4.2.0

2 years ago

4.1.9

2 years ago

4.1.8

2 years ago

4.1.7

2 years ago

4.1.6

2 years ago

4.1.5

2 years ago

4.1.4

2 years ago

4.1.3

2 years ago

4.1.2

2 years ago

4.1.1

2 years ago

4.1.0

2 years ago

4.0.9

2 years ago

4.0.8

2 years ago

4.0.7

2 years ago

4.0.6

2 years ago

4.0.5

2 years ago

4.0.4

2 years ago

4.0.3

2 years ago

4.0.2

2 years ago

4.0.1

2 years ago

4.0.0

2 years ago

3.9.9

2 years ago

3.9.8

2 years ago

3.9.7

2 years ago

3.9.6

2 years ago

3.9.5

2 years ago

3.9.4

2 years ago

3.9.3

2 years ago

3.9.2

2 years ago

3.9.1

2 years ago

3.9.0

2 years ago

3.8.9

2 years ago

3.8.8

2 years ago

3.8.7

2 years ago

3.8.6

2 years ago

3.8.5

2 years ago

3.8.4

2 years ago

3.8.3

2 years ago

3.8.2

2 years ago

3.8.1

2 years ago

3.8.0

2 years ago

3.7.9

2 years ago

3.7.8

2 years ago

3.7.7

2 years ago

3.7.6

2 years ago

3.7.5

2 years ago

3.7.4

2 years ago

3.7.3

2 years ago

3.7.2

2 years ago

3.7.1

2 years ago

3.7.0

2 years ago

3.6.9

2 years ago

3.6.8

2 years ago

3.6.7

2 years ago

3.6.6

2 years ago

3.6.5

2 years ago

3.6.4

2 years ago

3.6.3

2 years ago

3.6.2

2 years ago

3.6.1

2 years ago

3.6.0

2 years ago

3.5.9

2 years ago

3.5.8

2 years ago

3.5.7

2 years ago

3.5.6

2 years ago

3.5.5

2 years ago

3.5.4

2 years ago

3.5.3

2 years ago

3.5.2

2 years ago

3.5.1

2 years ago

3.5.0

2 years ago

3.4.9

2 years ago

3.4.8

2 years ago

3.4.7

2 years ago

3.4.6

2 years ago

3.4.5

2 years ago

3.4.4

2 years ago

3.4.3

2 years ago

3.4.2

2 years ago

3.4.1

2 years ago

3.4.0

2 years ago

3.3.8

2 years ago

3.3.7

2 years ago

3.3.6

2 years ago

3.3.5

2 years ago

3.3.4

2 years ago

3.3.3

2 years ago

3.3.2

2 years ago

3.3.1

2 years ago

3.3.0

2 years ago

3.2.0

2 years ago

3.1.0

2 years ago

3.0.8

2 years ago

3.0.7

2 years ago

3.0.6

2 years ago

3.0.5

2 years ago

3.0.4

2 years ago

3.0.3

2 years ago

3.0.2

2 years ago

3.0.1

2 years ago

3.0.0

2 years ago

2.0.5

2 years ago

2.0.4

2 years ago

2.0.3

2 years ago

2.0.2

2 years ago

2.0.1

2 years ago

1.0.0

2 years ago