Mod-react-components NPM

About

This package is created to be used in react projects. It helps streamline development by providing flexible reusable react components like:

Accordion
Expand Collapse
Form
Form Controls
- Button
- Checkbox
- Datepicker
- Input
- Label
- Radio
- Select
Headline
Iframe
Modal
Tab
Toast

Installation

Packge can be installed using

npm i mod-react-components

Usage

Form component example:

Include the CSS from this package at top level of your app only once and then import the required component wherever needed.

import 'mod-react-components/dist/index.css'
import { Form, Input } from 'mod-react-components'

function InformatioForm() {
  const defaultValues = {
    firstName: '',
    lastName: '',
    email: '',
    phone: ''
  }

  const [value, setValue] = useState(defaultValues)
  const [showModal, setShowModal] = useState(false)

  const handleInputChange = (e) => {
    setValue({ ...value, [e.target.name]: e.target.value })
  }

  const handleSubmit = () => {
    setShowModal(true)
  }

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Step title="Personal Information">
        <Input type="text" name="firstName" value={value.firstName} onChange={handleInputChange} data-required="firstName" placeholder="First Name" />
        <Input type="text" name="lastName" value={value.lastName} onChange={handleInputChange} data-required="lastName" placeholder="Last Name" />
      </Form.Step>
      <Form.Step title="Contact Information">
        <Input type="email" name="email" value={value.email} onChange={handleInputChange} data-required="email" placeholder="Email Address" />
        <Input type="text" name="phone" value={value.phone} onChange={handleInputChange} data-required="phone" placeholder="Phone Number" />
      </Form.Step>
    </Form>
  )
}