reuse-them

Introduction

reuse-them is a react component library for reusable form and some other components.

Installation

npm i reuse-them

Usage

import React from "react";
import { ModalForm } from "reuse-them";

const fields = [
  {
    inputs: [{ label: "City Name", type: "text", name: "cityName", value: "" }],
  },
  {
    inputs: [
      {
        label: "Area",
        type: "text",
        name: "area",
        value: "",
      },
    ],
  },
];

function prepareFields(fields) {
  const res = fields.map((field) => {
    return field.inputs;
  });

  const merged = [].concat.apply([], res);
  return merged.reduce((a, c) => ({ ...a, [c.name]: c.value }), {});
}

const App = () => {
  const [cities, setCities] = useState([]);
  const [show, setShow] = useState(false);
  const initialValue = prepareFields(fields);
  const [formData, setFormData] = useState(initialValue);

  const handleShow = () => setShow(true);

  const handleClose = () => {
    setFormData(initialValue);
    setShow(false);
  };

  const handleSetFormData = (params) => {
    setFormData(params);
  };

  const showUpdateModal = (obj) => {};

  const handleSubmit = async () => {
    handleClose();
    await axios.post(apiEndPoint + "cities/add", formData);
    fetchCities();
  };

  return (
    <>
      <button className="btn btn-primary" onClick={handleShow}>
        Add new
      </button>
      <ModalForm
        show={show}
        onClose={handleClose}
        fields={fields}
        formData={formData}
        onSetFormData={handleSetFormData}
        onSubmit={handleSubmit}
      />
    </>
  );
};

export default App;