Getting Started with Create React App

A simple and reusable custom measurements for React

installation

the package can be installed via npm:

npm install react-custom-measurements --save

Or via yarn

yarn add react-custom-measurements

You’ll need to install React and PropTypes separately since those dependencies aren’t included in the package. If you need to use a locale other than the default en-US, you'll also need to import that into your project from custom-measurements (see Localization section below). Below is a simple example of how to use the Custom-measurements in a React view. The example below shows how to include the CSS from this package if your build system supports requiring CSS.

import React, { useState } from "react";
import { Gown, LehenghaCholi, SalwarKameez, Shoes } from "custom-measurements";

const Example = () => {
  return (
    <Gown />
    <LehenghaCholi />
    <SalwarKameez />
    <Shoes />
  );
};

Added Clothing Type

salwar kameez, gown, lehengacholi, shoes

Configuration

The most basic use of the custom-measurements can be described with:

<Gown />

You can use props to change form details, input field, require input field:

<Gown
  details={detailsObject} //when you want to change measurements instruction details
  customStyles={customStyles} //when change the styles
  requireFields={requireFields} //only when add required field and add validation
  hideInputFields={hideInputFields} //only show some selected value
  onSubmit={onSubmit} // add functionality on onSubmit function
/>

If you want hide limited value in your form :

const hideInputFields = [
  "aboveBust",
  "height",
  //...otherValues
  ] //only add parameter name in camelCase

<LehenghaCholi
  hideInputFields={hideInputFields} //only hide some selected value
/>

In this hide limited values: by default show all values in form but if you want some selected values shown in form then you want to add parameter name in camelCase inside hideInputFields array.

If you want Required Field in your form :

const requireFields = [
  "aboveBustRequired",
  "heightRequired",
  // ...otherValues
  ] // add parameter name in camelCase and in last latter add Required. Like, valuesRequired.


<LehenghaCholi
  requireFields={requireFields} //show Required field in red star and also show validation when without submit value
/>

In this Required Field: by default all values is not required but if you want some selected values must be required then you want to add parameter name ans also in last latter add Required in camelCase inside requireFields array.

If you want change style in your form :

{form, formTitle, formGroup, Inputlabel, input, button, detailsName, li, label} // this all are style attribute

const customStyles = {
     formTitle: {
      fontSize: "25px",
      color: "#EBA03F",
    },
    input: {
      border: "1px solid blue",
      borderRadius:"3px"
    },
    // other styles...
}

<LehenghaCholi
  customStyles={customStyles} //change design according to your style
/>

If you want change SVG img colors and Height-Width :

{fillProduct, strokeBorder,fillRoundBorder, strokeRequired, width, height, fillFoot, strokeLine, fontsize, fontFamily, fillFont, fillRequired} // this all are SVG color and height-width changes attribute

// fillProduct : fill the color in SVG
// strokeBorder : apply border color in SVG
// strokeRequired : change color in measurements intruction round
// fillRoundBorder : fill the round and this will show only in shoulder to knee parameter
// width : to change the SVG width
// height : to change the SVG height

const customStyles = {
    svgStyle: {
      fillProduct: "", // other SVG
      strokeBorder: "", // shoes SVG // other SVG
      fillRoundBorder: "", // other SVG
      strokeRequired: "", // shoes SVG // other SVG
      width: '%', // shoes SVG // other SVG
      height: '%', // shoes SVG // other SVG
      fillFoot: "", // shoes SVG
      strokeLine: "", // shoes SVG
      fontsize: "", // shoes SVG
      fontFamily: "", // shoes SVG
      fillFont: "", // shoes SVG
      fillRequired: "" // shoes SVG
    },
}

<LehenghaCholi
  customStyles={customStyles} //change colors and height-width according to your SVG
/>

<Shoes
  customStyles={customStyles} //change colors and height-width according to your Shoes SVG
/>

If you want change measurements instruction :

{title, listItem = [], name, inputPlaceholder} // this all are change measurements instruction values

const detailsObject = {
    title: "title",
    listItem: [
        "details 1",
        "details 2",
        //other details..
    ],
    name: "Name",
    inputPlaceholder: "placeholder"
  }

<LehenghaCholi
  details={detailsObject} //change measurements instruction values
/>

If you want functionality on onSubmit function :

const onSubmit = (inputValues) => {
  console.log('inputValues', inputValues)
}

<Shoes
  onSubmit={onSubmit} //describe onSubmit function
/>

Browser Support

The custom-measurements is compatible with the latest versions of Chrome, Firefox, and IE10+.