suweya / react-verification-code-input Goto Github PK

Is there a way to disable specific fields to prevent users from entering values in them?

When the user fills all the inputs and the onComplete fires if the user keeps pressing a number in the keyboard the onComplete events keep firing again and again.

I think that the deseable result is that the onComplete function only can be fired once when the last input is empty and the user press a key.

Maybe the solution is add a prop to do something when the input is complete maybe clear all the fields or stop this behaviour, or both options in one prop.

Hi! Thanks for awesome package!
I am trying to clear values but having problems with types. Can you show me how to do it right?

I need to reset all fields in some situations. For instance when the code has been entered is not correct. Right now I need to re-render the whole component which sucks.

Hope see an update very soon @suweya

I am Unable to reset the field. I am setting empty state but its not reflected on the component.

你好，我最近在做关于验证码输入框的需求，看到您做的很棒！只是我在实施的过程中发现，一旦我有一个输出框输出错误，我点击输入错误的输入框，想重新更改数字时，总是会弹出一个全选复制的选项，我看了源码发现应该是每次点击时，做了一个全选的操作，所以才会有这样的问题，所以想问一下，这种问题是否有解决方案呢？
（找了好久都没找到解决方案。。。快疯了）

Not work on Dingtalk App. can't autofocus next input.

I want to edit its pre-fixed style. Can this library receive an object as props for style? such as style object. I cannot override any style because of the css module.

the library includes unnecessary styles. I would like to be able to turn them off.

It would also be convenient to have classes for internal elements, so as not to refer to them by tag (div / input) OR the ability to specify classes yourself

thanks for the library 🎉

in clearvalues, state.values gonna change to empty array with fields size
this.setState({ values: Array(fields).fill('') });

this should be reset to default value as logic happened in constructor
or get props for controlling that logic

hey @suweya, first of all congrats on this nice component (:

i‘ve just noticed that as the styles are imported by default, and they have some !importants on it, so its kinda difficult styling over this component..

and although the default style is pretty nice, some would want to adapt it to it's theme. i think there’s some possible work arounds to fix this:

1. breaking: stop importing the style (people using would have to import it aside the component, as react-slick and other packages does)

2. non-breaking: rewrite the css so there’s no usage of !importants

there are advantages on each approach (eg.: build-size vs default styling) that you can opt into, but i think this issue deserves an action, on either direction, to improve usability

I would like to make this change.

I'm working on a Cordova application and we need the numeric keyboard to popup on input focus but due to this issue, the user will get the full QWERTY keyboard.

Want to add a margin between fields, but it breaks the ROOT_STYLE width. The only way is to use `!important to overwrite the inline width style. But that's not what we want.
Is it possible to consider the margin into the width calculating?

Invariant Violation: View config not found for name input. Make sure to start component names with a capital letter.

This error is located at:
in input (created by ReactCodeInput)
in div (created by ReactCodeInput)
in div (created by ReactCodeInput)
in ReactCodeInput (at VerifyNumber.js:14)
in RCTView (at VerifyNumber.js:12)
in RCTSafeAreaView (at SafeAreaView.js:55)
in SafeAreaView (at VerifyNumber.js:11)
in RCTView (at KeyboardAvoidingView.js:207)
in KeyboardAvoidingView (at VerifyNumber.js:9)
in VerifyNumber (at SceneView.tsx:98)
in StaticContainer
in StaticContainer (at SceneView.tsx:89)
in EnsureSingleNavigator (at SceneView.tsx:88)
in SceneView (at useDescriptors.tsx:125)
in RCTView (at CardContainer.tsx:199)
in RCTView (at CardContainer.tsx:198)
in RCTView (at CardSheet.tsx:33)
in ForwardRef(CardSheet) (at Card.tsx:526)
in RCTView (at createAnimatedComponent.js:151)
in AnimatedComponent (at Card.tsx:508)
in PanGestureHandler (at GestureHandler.native.tsx:13)
in PanGestureHandler (at Card.tsx:502)
in RCTView (at createAnimatedComponent.js:151)
in AnimatedComponent (at Card.tsx:498)
in RCTView (at Card.tsx:492)
in Card (at CardContainer.tsx:164)
in CardContainer (at CardStack.tsx:497)
in RCTView (at Screens.tsx:70)
in MaybeScreen (at CardStack.tsx:490)
in RCTView (at Screens.tsx:48)
in MaybeScreenContainer (at CardStack.tsx:388)
in CardStack (at StackView.tsx:433)
in KeyboardManager (at StackView.tsx:431)
in RNCSafeAreaView (at src/index.tsx:28)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
in SafeAreaProviderCompat (at StackView.tsx:428)
in RCTView (at StackView.tsx:427)
in StackView (at createStackNavigator.tsx:82)
in StackNavigator (at App.js:51)
in RootStackRouter (at App.js:112)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:288)
in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:66)
in ThemeProvider (at NavigationContainer.tsx:65)
in ForwardRef(NavigationContainer) (at App.js:111)
in AuthWrapper (at App.js:110)
in App (at withExpoRoot.js:21)
in RootErrorBoundary (at withExpoRoot.js:20)
in ExpoRoot (at renderApplication.js:40)
in RCTView (at AppContainer.js:101)
in DevAppContainer (at AppContainer.js:115)
in RCTView (at AppContainer.js:119)
in AppContainer (at renderApplication.js:39)

exports.get
ReactNativeViewConfigRegistry.js:93:8
renderRoot
[native code]:0
runRootCallback
[native code]:0
dispatchAction
[native code]:0
setValue
AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:176656:15
nn
auth.js:372:150
tryCallOne
core.js:37:14
setImmediate$argument_0
core.js:123:25
callImmediates
[native code]:0
flushedQueue
[native code]:0
callFunctionReturnFlushedQueue
[native code]:0

The use case here is if a user clicks on a link in the email with a code, when the component renders a prop with that code would be passed into the component and treated just like the user had typed it in.

Hi everyone, due to some iOS Safari restrictions around focusing HTMLInputElements, this module does not work on iOS Safari. Unfortunately, there is no easy fix, but it seems possible through swapping Elements and transferring values between Input Elements (So the focused input stays the same, but moves forward in the DOM tree)

In my case (I am using cordova), I was lucky since the UIWebview can be adapted, so if you are a cordova user, just set the KeyboardDisplayRequiresUserAction preference in the config.xml to false

After commit #5731745 I am no longer able to copy and paste the code into the input fields. It is due to the input pattern missing an asterisk at the end. This is happening across chrome, firefox and safari browsers. What was the reason why this was removed? I'm happy to submit a PR for this to add it back in.

I am specifically talking about this line: https://github.com/suweya/react-verification-code-input/blob/master/src/index.js#L216

Values are not updated in the UI.

Here's the sample code.

const Page = () => {
  const [loading, setLoading] = useState(false);
  const [pinCode, setPinCode] = useState('');

  useEffect(() => {
    if (!window.localStorage.getItem('email_to_confirm')) {
      Router.replace('/login');
    }
  }, []);

  const onPinComplete = code => {
    setLoading(true);
    const email = window.localStorage.getItem('email_to_confirm');
    authApi
      .confirmEmail({ code, email })
      .then(response => {
        console.log(response.data);
        setPinCode('');
        setLoading(false);
      })
      .catch(error => {
        console.log(error.response.data);
        setPinCode('');
        setLoading(false);
      });
  };

  return (
    <ReactCodeInput
      className="mx-auto"
      type="number"
      fields={6}
      fieldWidth={45}
      onChange={value => setPinCode(value)}
      onComplete={onPinComplete}
      loading={loading}
      values={pinCode}
    />
  );
};

autoFocus 在 ios 手机上init的时候，input 框没有自动focus，从而导致键盘不能弹起

Hi. Thanks for a nice tool!

I meet a situation which I think it's a common scenario is that I send a request after the input complete.
The request may cost some time and the loading field is set to true. But the user could still edit the inputs during the request period.

Could there be a field to disable this? Since it's a little bit weird.
Thanks. :)

I don't know how to properly get the verification code value, is there a value prop for this component?
I'm getting 'undefined' when I try to do this: console.log(e.target); using onChange on this component

Hi, how can I set the font-family "Lato" to none (default) for numbers?

i've got a humble feature request

right now, each input field can only hold one digit then it moves to the next field
but if each field could hold 4 digits, it would be useful for credit card numbers

this could even enable ideas like this

I'd like to use tailwindCSS classes to style the numeric inputs. At the moment it's only possible to add className to the root of the component and then you have to style it using normal css.

However, for those developers who want to use utility classes for styling there is no option to do so currently.

Also, thanks for this library!

If you enter the same value for each input, the cursor isn't moved to the next input.

Here is the video example.

I think it is caused by the onChange event.
onChange event isn't fired when input the same value.

Couldn't add autocomplete = false to the component.

<ReactCodeInput className="digit-inputs verify-phone" fields={11} onComplete={handlePhoneComplete} autocomplete={false}/>

autoFocus 在 ios 手机上init的时候，input 框没有自动focus，从而导致键盘不能弹起

hi currently type = "password" is showing a warning, could you please remove this warning

index.js:1 Warning: Failed prop type: Invalid prop typeof valuepasswordsupplied toReactCodeInput, expected one of ["text","number"].

can you add placeholder props to inputs ?
its very usefull .

Does this component supports RTL ?

<html lang="en" dir="rtl">

Steps:

• Fill out inputs with zero
• Set cursor after value in the first input
• 
• Copy 123456
• Paste 123456 values
  Expected Result
  
  Actual Result
  

Hi!

I user typescript. And when I try check types in my project I have error.

 tsc --noEmit

node_modules/react-verification-code-input/dist/index.d.ts:18:38 - error TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

18 declare class ReactCodeInput extends React.Component<ReactCodeInputProps> {

To reproduce this error
app.tsx

import React from "react";
import ReactCodeInput from "react-verification-code-input";

export default function App() {
  return (
      <ReactCodeInput />;
  );
}

tsconfig.json

{
    "include": [
        "./src/**/*"
    ],
    "compilerOptions": {
        "strict": true,
        "esModuleInterop": true,
        "lib": [
            "dom",
            "es2015"
        ],
        "jsx": "react"
    }
}

Run command tsc --noEmit

When type is not a number prevent caret from going on next field or trigger onComplete when cursor is on last input box.