Add a behaviour when key isn't allowed

soywod / react-pin-field

📟 React component for entering PIN codes.

https://soywod.github.io/react-pin-field/

MIT License

413 stars 24 forks source link

Add a behaviour when key isn't allowed #4

Closed bluepioupiou closed 4 years ago

bluepioupiou commented 4 years ago

When we enter a key that is not allow, we don't really see that it's not a bug. Maybe display a red border hat shake a little before comming back to normal on the highlited input

soywod commented 4 years ago

The lib provides no style by default (and it's not the aim). On the other hand, what can be done is to add a new event when the user presses a bad key. Or add a specific className. What do you think?

bluepioupiou commented 4 years ago

seems good enough for me !

bluepioupiou commented 4 years ago

I think the best will be to execute a method passed as props and let the responsible component decide what to do of that

soywod commented 4 years ago

Added both in d824a46450b939bb23f2332fbd2eacd9f12fb125:

classes: https://github.com/soywod/react-pin-field/blob/d824a46450b939bb23f2332fbd2eacd9f12fb125/src/pin-field.tsx#L173-L184
callbacks: https://github.com/soywod/react-pin-field/blob/d824a46450b939bb23f2332fbd2eacd9f12fb125/src/pin-field.types.ts#L8-L9