40818419 / react-code-input

React component for entering and validating PIN code.
MIT License
314 stars 129 forks source link

Reset the state of the component and its inputs when a different props.value is passed in #155

Open acusti opened 2 years ago

acusti commented 2 years ago

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[bot] commented 2 years ago

Codecov Report

Merging #155 (3593aa9) into master (2599c5d) will increase coverage by 0.44%. The diff coverage is n/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 Impacted file tree graph

@@            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 data Powered by Codecov. Last update 2599c5d...61d697e. Read the comment docs.