@shiplux/form-sdk-react NPM

shiplux-form-library

Tutorial
Props Example
Sandbox Example
API

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

Name	Type	Optional
background	string	Yes
color	string	Yes
placeholder_color	string	Yes
title	string	Yes
description	string	Yes
titleSize	number	Yes
width	number	Yes
height	number	Yes
steps	Array<{Step}>	No
numberStep	boolean	Yes
isPagination	boolean	Yes
pagination	Object<Options>	Yes
isInternational	boolean	Yes
international	Object<Options>	Yes
inputOutline	boolean	Yes
queryParams	string	Yes
inlineInput	boolean	Yes
inputWidth	number	Yes
buttonWidth	number	Yes

Options

Name	Type	Optional
bgActive	string	No
bg	string	No
color	string	No
borderColor	string	No
firstTitle	string	Yes
secondTitle	string	Yes
isCover	boolean	Yes
isBottom	boolean	Yes

Step

Name	Type	Optional
steps	Array<Input>	No
title	string	Yes
isAddVehicle	boolean	Yes
isVehicleStep	boolean	Yes
isshippingMethod	boolean	Yes

Input

Name	Type	Optional
label	string	Yes
placeholder	string	Yes
name	string	No
Location	Object<Location>	No
select	boolean	Yes
options	Array<Option>	Yes
validations	Object<Validation>	Yes
type	input types	Yes
vehicleYear	boolean	Yes
vehicleMakeAPI	boolean	Yes
vehicleModelAPI	boolean	Yes

Option

Name	Type	Optional
label	string	No
Value	string or number	No
defaultValue	string or number	Yes

Validation

Name	Type	Optional
required	boolean	Yes
min	number	Yes
max	number	Yes

Location

Name	Type	Optional
cityZipLookup	boolean	Yes
autoComplete	boolean	Yes

@everything-registry/sub-chunk-830

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago