@shiplux/form-sdk-react v6.5.7
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
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 |
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago