Throw an error when the index prop supplied is of type string to prevent the app from freezing

[jgudo]

It is clearly stated in docs that the index prop only accepts number type. However, there are instance where the index pass comes from html data attributes like this example codesandbox.

If you would change the line from onClickImage method line 25, setActiveIndex(+idx || 0);, into setActiveIndex(idx || 0); removing the unary + operator or unparsing the string, the app would freeze or become unresponsive.
It would be better if we can throw an error if the index is of type string to prevent the app from freezing.

[igordanchenko]

Thank you for bringing this case to my attention. Generally speaking, I'm not in favor of implementing runtime props validation since this library relies on TypeScript type-checking. However, I'm going to make an exception for this particular case since the infinite rendering loop is definitely not the best DX. I'll add a fix in the next patch release.

P.S. I'd strongly recommend not to follow the approach you used in the above sandbox. The way you implemented the onClick handler on the <div> container makes your app inaccessible - your users won't be able to interact with individual images via keyboard navigation or voice-over controls.

The better approach would be to:

• wrap each image in a <button> element (you'd need to reset the default button styles)
• move the onClick handlers to your <button> elements
• add meaningful alt attributes to your <img> elements

This way you'd also not need to use the data-index attributes that caused your issue in the first place.

[jgudo]

@igordanchenko I can see that you have the patch already 92df07a . Thank you!