Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thejohnfreeman/react-forms
Low effort, high quality forms in React.
https://github.com/thejohnfreeman/react-forms
Last synced: 21 days ago
JSON representation
Low effort, high quality forms in React.
- Host: GitHub
- URL: https://github.com/thejohnfreeman/react-forms
- Owner: thejohnfreeman
- License: mit
- Created: 2019-02-03T05:28:53.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-10-10T15:10:49.000Z (about 5 years ago)
- Last Synced: 2024-11-24T22:57:16.188Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://stackblitz.com/edit/react-forms-in-bootstrap
- Size: 180 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-forms
Low effort, high quality forms in React.
[](https://www.npmjs.com/package/@thejohnfreeman/react-forms)
[](https://bundlephobia.com/result?p=@thejohnfreeman/react-forms)
[](https://github.com/prettier/prettier)
[](https://travis-ci.org/thejohnfreeman/react-forms)
## Usage
```typescript
import * as React from 'react'
import { observer } from '@thejohnfreeman/observer'
import { ViewModels } from '@thejohnfreeman/react-forms'
import {
Button,
Errors,
Form,
TextField
} from '@thejohnfreeman/react-forms-material'
// Build the constructor for our view models.
// Note: fields are required (i.e. non-null) by default, just as in SQL.
const MyViewModel = ViewModels.group({
username: ViewModels.text(),
password: ViewModels.password().minLength(8),
})
@observer
class MyComponent extends React.Component {
// Reference to the backend service.
private readonly auth = this.props.backend.auth
// Initializes with `username` and `password` from `props`, if present.
private readonly viewModel = MyViewModel.construct(this.props)
// Only called when form is valid.
private readonly onSubmit = ({ username, password }) => {
this.auth.logIn(username, password)
}
public render() {
// Submit button is disabled if form invalid *or* while waiting for
// response from backend. Errors are presented as dismissable cards with
// a red background.
return (
{this.auth.isLoggingIn ? 'Logging in...' : 'Log in'}
)
}
}
```
## Development
I am trying to manage this project with [Lerna][]. I say _try_ because it is
confusing, documentation is sparse, there is no official tutorial, and
changes are coming so quickly that even recent discussion has fallen
out-of-date. I'll try to summarize what I know here.
1. After checking out the code, call `lerna bootstrap` from the root package
to install dependencies and link the packages to each other.
2. If you want to run tests or linters, you can call `yarn test` or `yarn
lint` from the root package or any workspace.
3. To publish, you must call `lerna publish` from the root package. You must
not call `yarn publish` from any package. Before doing that, you will need
to bump package versions and dependency versions yourself, manually. `lerna
publish` will offer to bump package versions, but it will not bump
dependency versions, which means individual packages will fall out of sync
with each other. You can call `lerna changed` to see which packages need
new versions. Those same packages should have their dependencies updated if
they were changed in response to a dependency change. Don't forget to
change the shared version number in `lerna.json`.
4. If you want to add a development dependency for a package, add it to the
root package only with `yarn add -DW`. If you add a peer dependency to
a package, add it as a development dependency on the root package as well.
[Lerna]: https://lerna.js.org/