https://github.com/ngduc/ui-form-field
ui-form-field based on formik - a simple way to work with Forms in React.
https://github.com/ngduc/ui-form-field
easy-to-use form formik react
Last synced: 28 days ago
JSON representation
ui-form-field based on formik - a simple way to work with Forms in React.
- Host: GitHub
- URL: https://github.com/ngduc/ui-form-field
- Owner: ngduc
- License: mit
- Created: 2019-02-16T05:10:54.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-05-08T06:24:59.000Z (over 6 years ago)
- Last Synced: 2024-12-20T14:43:14.608Z (10 months ago)
- Topics: easy-to-use, form, formik, react
- Language: CSS
- Homepage:
- Size: 2.96 MB
- Stars: 21
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ui-form-field
[](https://travis-ci.org/ngduc/ui-form-field)
A simple way to work with Forms in React.
- Live Demo: [Codesandbox](https://codesandbox.io/s/304nq7w4z6?view=editor&module=/src/examples/BasicExample.tsx)
- Code examples: [Link](/src/examples)
### 🌟 Features
- Lightweight: 22 kb
- Render different `form layouts`: Bootstrap 4, Semantic UI, Spectre and more. (including horizontal layout, inline fields)
- Compatible with `formik`. This is built on top of formik and can be used together with it (for custom fields, etc.)
- Support custom advanced field types: react-select, multi-select, tag input with auto-complete.
- Simplify use cases like: Dynamic (conditional) field rendering, mixing with other components within the form, custom fields.
- Works well on mobile screens.
```JS
$ npm install ui-form-field
import 'ui-form-field/lib/css/bootstrap4.css';
import { FormContainer, Form, Field, Button } from 'ui-form-field';
import { SingleSelect, MultiSelect } from 'ui-form-field/lib/custom'; // requires 'react-select'
(
Cancel
)} />
```
RESULT: (Full form, validation (with yup) & error messages)
[](https://codesandbox.io/s/304nq7w4z6?view=editor&module=/src/examples/BasicExample.tsx)
### 📖 Development
```
$ yarn dev Start Dev mode
$ yarn test Run tests (jest & puppeteer in headless mode)
$ yarn build Build (output to ./lib)
$ yarn postbuild Copy sources or pre-built files to "lib" for publishing to npm. (Note: this will override built files)
```
### 📖 Documentation
[Change Log](/CHANGELOG.md)
#### TODO:
- Support more form layouts: Material, etc.
- More field types: Date Range, etc.
- (File a PR to request any feature, field type, etc.)
### 🙌 Thanks
All contributions are welcome!
[formik](https://github.com/jaredpalmer/formik)