mkhancha_myforms

myforms

Made with create-react-library

Install

npm install --save mkhancha_myforms

yarn add mkhancha_myforms

Usage

import React from 'react';

import MyForm from 'myforms';

const config = [
  {
    widget: 'input',
    name: 'title',
    label: 'Title',
    helperText: 'Fill in the title',
    variant: 'outlined',
    defaultValue: '',
    type: 'text',
    start: null,
    end: null,
    grid: 12
  },
  {
    widget: 'textarea',
    name: 'description',
    label: 'Description',
    helperText: '',
    variant: 'outlined',
    type: 'text',
    defaultValue: '',
    start: null,
    end: null,
    grid: 12
  },
  {
    widget: 'singleCategories',
    name: 'technologies',
    label: 'Technologies',
    multiple: true,
    grid: 12,
    defaultValue: [],
    options: [
      'PHP',
      'ASP.NET',
      'Python',
      'Coldfusion',
      'Node JS',
      'React JS',
      'Angular JS',
      'Mysql',
      'Parseserver',
      'Firebase'
    ]
  },
  {
    widget: 'uploads',
    name: 'files',
    label: 'Upload Files',
    multiple: true,
    grid: 12,
    defaultValue: []
  },
  {
    widget: 'checkbox',
    name: 'featured',
    defaultValue: false,
    label:
      'Featured, make this post featured ($30 will be charged to make post featured).',
    grid: 12
  }
];

const userId = 'a123';
const sessionId = 'b456';
const baseURL = 'http://localhost:8080';

const App = () => {
  const [formValues, setFormValues] = React.useState(
    config.reduce((acc, cur) => {
      if (cur.hide) return acc;
      acc[cur.name] = cur.defaultValue;
      return acc;
    }, {})
  );
  const [images, setImages] = React.useState([]);
  const [errors] = React.useState({});
  const [disableds] = React.useState({});
  const handleChange = (name, value) => {
    setFormValues((fV) => {
      return { ...fV, [name]: value };
    });
  };

  console.log('formValues: ', formValues);
  console.log('images: ', images);

  console.log('errors: ', errors);
  console.log('disableds: ', disableds);

  return (
    <div>
      <h1>Form Example</h1>
      <MyForm
        config={config}
        reference='Exampl1'
        values={formValues}
        errors={errors}
        disableds={disableds}
        handleChange={handleChange}
        images={images}
        setImages={setImages}
        userId={userId}
        sessionId={sessionId}
        baseURL={baseURL}
      />
    </div>
  );
};

export default App;

License

MIT © manishkhanchandani