mod-react-components
v3.0.1
Published
This package is created to be used in react projects. It helps streamline development by providing flexible reusable react components like:
Downloads
21
Readme
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.