I develop UIs and app architectures for projects with fluid requirements.
moubi / enform Goto Github PK
View Code? Open in Web Editor NEWHandle React forms with joy ๐ฟ
License: MIT License
Handle React forms with joy ๐ฟ
License: MIT License
Whenever initial
prop changes (getting new values as a result of an API call) Enform
should update its internal state and display the new defaults.
The solution should use ref comparison.
Currently clearFields
tries to empty the form. This is not very useful since the common case would be to reset the form.
clearFields
should be renamed to resetFields
and as a result it will revert the values to initial
values.
Enform doesn't update its internal state when new initial
prop value is passed. Is that desired?
It means, consumer components should tell it explicitly when to re-render. That is usually done via key
prop. More on that matter could be found in the docs
Other libraries like Formik fx. provide additional prop to manage that behaviour.
This is normal, but the question is does it make sense? Shouldn't Enform handle re-rendering by default? If YES, it could be done with something like:
const [initial, setInitial] = useState({ ...props.initial });
...
if (props.initial !== initial) {
seInitial({ ...initial })
}
The outcome of this issue should be a test case (preferable in codesandbox forking on of the examples) and an answer YES/NO.
This should be v2
of Enform.
Using functional component and state hooks.
Currently the initial error state is built based on initial
prop values (default field values) and defaults to false
for all fields. That might be problematic in some cases, fx. passing the error to a child component on render that expects value which is non boolean
.
In order to cover the case our initial errors state value should be based on the validation
prop if present.
It should expose the same api as the component with render prop.
No change there, but a more convenient way of using the library.
import { Enform } from "enform"
or
import { useForm } from "enform"
you decide...
Both render props and hooks have their use cases.
About the problems they solve (or create) read "Render props vs hooks".
onChange could be expensive, so it needs to check if specific field error is set and clears it only on initial call.
https://github.com/moubi/enform/blob/master/src/Enform.js#L111
Sometimes forms need to react on payload as a result of an API call. In such cases API response may contain specific errors per field, which we are interested on display in the form.
In order that to work Enform needs to be told somehow about these errors. In Formik
this is done via setErrors()
method (jaredpalmer/formik#33).
That opens door for more use cases where one may need to manipulate Enform's internal state from outside. Let's say updating the values programmatically.
The solution to all these could be a general setState()
method fx.
setState({
values: {
[fieldName]: value,
...
},
errors: {
[fieldName]: errorMessage,
...
},
...
})
Update both README.md
and docs/index.md
which at the moment document the render prop API.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.