mod-react-components

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>
  )
}

License

This project is licensed under the MIT license.

Copyright (c) 2021 Modernize.