From 61410ec847e451dc9df1d74945b99f8233643cd9 Mon Sep 17 00:00:00 2001
From: Andrew Patton <andrew@acusti.ca>
Date: Thu, 14 Oct 2021 17:46:44 -0700
Subject: [PATCH] Add story example to illustrate resetting ReactCodeInput #69
 #129

---
 src/ReactCodeInput.stories.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/ReactCodeInput.stories.js b/src/ReactCodeInput.stories.js
index 8304fba..1892f5c 100644
--- a/src/ReactCodeInput.stories.js
+++ b/src/ReactCodeInput.stories.js
@@ -57,6 +57,18 @@ const darkStyle = {
 stories.addDecorator((story, context) => withInfo('Details')(story)(context));
 stories.addDecorator(withKnobs);
 
+// Component for With Reset story
+function WithReset() {
+    const [value, setValue] = React.useState(null);
+
+    return (
+        <React.Fragment>
+          <ReactCodeInput onChange={() => setValue(null)} value={value} />
+            <button style={{ ...inputStyle, width: 'auto', backgroundColor: 'lightgray' }} onClick={() => setValue('')}>Reset</button>
+        </React.Fragment>
+    )
+}
+
 // Stories for Input Field
 stories
   .add(
@@ -72,7 +84,8 @@ stories
   .add(
     'Force Uppercase', () =>
       <CodeInputField fields={4} type="text" forceUppercase value="test" onChange={action('onChange')} />
-  );
+  )
+  .add('With Reset', WithReset);
 
 // Creation of Props
 propVariantStories.addDecorator((story, context) => withInfo('Details')(story)(context));