Reset the state of the component and its inputs when a different props.value is passed in
note that this branch was branched off of #154 and will be easier to review in isolation from those changes.
this PR simplifies component state handling and updates state.value and state.input when props.value changes to enable resetting the component’s state as requested in #129 (also provides a better solution for #69). it also adds fallbacks and checks to work with props.value being null or undefined. these changes enable the following pattern, which i added as a new “With Reset” story to the docs:
function Resettable() {
const [value, setValue] = React.useState(null);
return (
<Fragment>
<ReactCodeInput onChange={() => setValue(null)} value={value} />
<button onClick={() => setValue('')}>Reset</button>
</Fragment>
);
}
commits are atomic and explain in detail what changes are contained in the PR.
Codecov Report
Merging #155 (3593aa9) into master (2599c5d) will increase coverage by
0.44%. The diff coverage isn/a.
:exclamation: Current head 3593aa9 differs from pull request most recent head 61d697e. Consider uploading reports for the commit 61d697e to get more accurate results
@@ Coverage Diff @@
## master #155 +/- ##
==========================================
+ Coverage 96.55% 96.99% +0.44%
==========================================
Files 2 2
Lines 145 133 -12
Branches 41 36 -5
==========================================
- Hits 140 129 -11
+ Misses 5 4 -1
| Impacted Files | Coverage Δ | |
|---|---|---|
| src/utils.js | ||
| src/ReactCodeInput.js | ||
| ReactCodeInput.js | 96.72% <0.00%> (ø) |
|
| utils.js | 100.00% <0.00%> (ø) |
Continue to review full report at Codecov.
Legend - Click here to learn more
Δ = absolute <relative> (impact),ø = not affected,? = missing dataPowered by Codecov. Last update 2599c5d...61d697e. Read the comment docs.