Introduce containerProps

Author: andreaswilli

README.md

@@ -56,12 +56,12 @@ All of these props are optional and some also come with a default value. However
 | autoFocus           | Boolean  | `false`        | Focus the input automatically as soon as it is rendered.                                                                                                                                                                                                                                                                 |
 | removeDefaultStyles | Boolean  | `false`        | Completely remove any styles that are not required for the component to work properly. This is useful if you want to override the default styles (see [Custom Styling](#custom-styling)).                                                                                                                                |
 | debug               | Boolean  | `false`        | Reveal what is going on behind the scenes, which might come in handy when trying to better understand the component. Obviously you don't want to use this in production. 😄                                                                                                                                              |
-| inputProps          | Object   | `{}`           | These props get forwarded to the input element.                                                                                                                                                                                                                                                                          |
+| inputProps          | Object   | `{}`           | The properties of this object get forwarded as props to the input element.                                                                                                                                                                                                                                               |
+| containerProps      | Object   | `{}`           | The properties of this object get forwarded as props to the container element.                                                                                                                                                                                                                                           |
 | classNames          | Object   | `{}`           | CSS class names to add to the specified elements. For more details see [Custom Styling](#custom-styling).                                                                                                                                                                                                                |
 | onChange            | Function | -              | Callback function that gets called with the string value whenever it changes.                                                                                                                                                                                                                                            |
 | onFocus             | Function | -              | Callback function that gets called when the component obtains focus.                                                                                                                                                                                                                                                     |
 | onBlur              | Function | -              | Callback function that gets called when the component loses focus.                                                                                                                                                                                                                                                       |
-| (any other prop)    | Any      | -              | Any props not listed above will be directly forwarded to the `container` element.                                                                                                                                                                                                                                        |
 
 ## Custom Styling
 
@@ -122,6 +122,12 @@ Have a look at this example:
 }
 ```
 
+## Migration Guide: `v2` --> `v3`
+
+- **Additional props**
+
+  Custom props are no longer forwarded to the container element. Use the new prop `containerProps` instead and specify the custom props in object literal form.
+
 ## Migration Guide: `v0.1.x` --> `v2`
 
 - **prop: `input`**

src/index.d.ts

@@ -7,6 +7,7 @@ export interface VerificationInputProps {
   removeDefaultStyles?: boolean;
   debug?: boolean;
   inputProps?: object;
+  containerProps?: object;
   classNames?: {
     container?: string;
     character?: string;

src/index.js

@@ -17,11 +17,11 @@ const VerificationInput = forwardRef(
       removeDefaultStyles,
       debug,
       inputProps,
+      containerProps,
       classNames: classes,
       onChange,
       onFocus,
       onBlur,
-      ...restProps
     },
     ref
   ) => {
@@ -104,7 +104,7 @@ const VerificationInput = forwardRef(
             "vi__container--default": !removeDefaultStyles,
           })}
           onClick={() => inputRef.current.focus()}
-          {...restProps}
+          {...containerProps}
         >
           {[...Array(length)].map((_, i) => (
             <div
@@ -149,6 +149,7 @@ VerificationInput.propTypes = {
   removeDefaultStyles: PropTypes.bool,
   debug: PropTypes.bool,
   inputProps: PropTypes.object,
+  containerProps: PropTypes.object,
   classNames: PropTypes.shape({
     container: PropTypes.string,
     character: PropTypes.string,
@@ -168,6 +169,7 @@ VerificationInput.defaultProps = {
   removeDefaultStyles: false,
   debug: false,
   inputProps: {},
+  containerProps: {},
   classNames: {},
 };
 

src/verification-input.test.js

@@ -350,8 +350,8 @@ describe("VerificationInput", () => {
     expect(screen.getByRole("textbox")).toHaveAttribute("type", "tel");
   });
 
-  it("should forward unknown props to container element", () => {
-    render(<VerificationInput prop="value" />);
+  it("should forward containerProps to container element", () => {
+    render(<VerificationInput containerProps={{ prop: "value" }} />);
 
     expect(screen.getByTestId("container")).toHaveAttribute("prop", "value");
   });