arunghosh / react-pin-input Goto Github PK
View Code? Open in Web Editor NEWReact PIN / OTP input component
License: MIT License
React PIN / OTP input component
License: MIT License
It would be great to be able to have access to methods through the api. I'd like to implement a custom keyboard for this.
Be great if could allow to copy and code then paste into first input and for the rest of the inputs fill with the correct number.
Everytime I add a new package I get this error regarding the PinInput module. Anyone has got a clue about what could be happening?
The placeholder is created in a shadow DOM right now and there's no way to modify the styling.
Please at least add "part" attributes on the elements within the shadow DOM to allow developers to customize the stylings.
Or, another alternative is to add another props like "placeholderStyle".
Hi, this is a nice work you done here, but could you update the sandbox example?
It uses an outdated (v0.9.2) version that is missing some features such as paste input
I use Next.js (v. 11.1.2)
After updating react-pin-input
to the 1.1.0
version yarn build started to fail with the following error.
ReferenceError: window is not defined
at Object.<anonymous> (/Users/dro/work/rubyroid/italbazar/frontend/node_modules/react-pin-input/dist/bundle.js:1:216)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.17049 (/Users/dro/work/rubyroid/italbazar/frontend/.next/server/pages/_app.js:3804:18)
at __webpack_require__ (/Users/dro/work/rubyroid/italbazar/frontend/.next/server/webpack-runtime.js:25:42)
at Object.57080 (/Users/dro/work/rubyroid/italbazar/frontend/.next/server/pages/_app.js:718:33) {
type: 'ReferenceError'
}
Rollback to version 1.0.1
resolves the issue
Please add disable prop to toggling input's disabled attr.
This occurs when dynamically passing the input length. Check this sandbox I have created.
https://codesandbox.io/s/react-pin-input-forked-13y1m?file=/src/App.js
It is difficult to tell what changed from previous release.
I can see 0.8.0 was introduced with "fixed security issues" commit but I don't see what the issue was and if the release contains other changes besides bumping some dependencies.
Is there any reason why there is not a placeholder attribute that we can set?
Hi,
Was trying to add manual values to pin Input but it's not taking the values.
Is there any to add values to the input field manually?
https://codesandbox.io/s/react-pin-input-forked-3mo8xm?file=/src/App.js
disabled?: boolean
should be added to interface PinInputProps
in react-pin-input.d.ts
.
Thank you for authoring and maintaining this component.
One request: is it possible to add support for setting an initial PIN value? Right now, there is no straightforward way to set the values programmatically. Happy to submit a pull request, if this is something you are open to including.
Autosave of pin entered in the boxes is enabled in the package.
Is there a way to disable the chrome autofill behavior if the PIN value is entered and submitted?
We have a IOS React Native App that contains a webview, that webview shows this react-pin-input, however this compoent does not seem play nicely with the IOS 'From Messages' feature, where you can paste in the code sent in a SMS message. Only the first number is pasted - i have provided a couple of screengrabs illustrating the issue
I get this error
"'PinInput' cannot be used as a JSX component.
Its instance type 'PinInput' is not a valid JSX element."
on version 1.0.4
I need to include this as a controlled component for use in forms, (inside a wrapped field with something like React Final Form),
As such the initialvalue may change (say for instance via form reset).
Once the object is rendered, change to initialvalue has no effect
Can you please expose a method (like ref.clear()) to set the current value, that way I can use a react side effect to listen to changes in my wrapped component, and then inject these changes into your pin code component.
Thanks.
I am not getting the keypad on the android devices if I set type="number". Please see image.
Cordova and ReactJS are used in this project that I am working on.
<PinInput
length={4}
secret
type="numeric"
ref={p => pin = p}
onComplete={(value) => {
props.onComplete(value)
pin.clear()
}}
/>
thx in advance
So, I've installed today this module in my React-JS project, and I'm confronting now with an issue. Not all the styles written in .pincode-input-text
and .pincode-input-text:focus
classes are applied. In rest, everything's working awesome...
Here's the code snippet of these 2 classes
.pincode-input-text {
text-align: center;
color: #fff;
border-color: #f5f5f5;
background-color: #070713;
width: 50px;
height: 50px;
font-size: 1rem;
font-family: 'Roboto', sans-serif;
line-height: 1.5;
}
.pincode-input-text:focus {
border-color: #fff;
outline: none;
box-shadow: none;
}
And here's a screen from my inspection tool:
P.S. Yeah, I'm using SCSS, so I've done everything according to the pattern shown in Readme.md
Hi,
First of all thank you for the module :)
Even though I put "numeric" as type for the input, the keyboard is not numeric at all for Android, and starts as numeric for Iphone, but then switches back to letters after one input.
Thanks for your help,
Antoine
I've been using this library in a project. I've been testing using Browserstack and I've run into issues on older browsers:
I've seen this so far on:
I'll dig into this further myself and report back. If you've got an ideas let me know!
using "OnComplete" function, I am trying to focus on the next input element on my webpage, however, I am not able to focus. It only works when the last character in pin input is removed and added again. but not the first time.
Pin Input somehow maintains the focus unless manually clicked somewhere in the background.
PIN is secret and only number
<PinInput length={6} focus // secret inputStyle={{ borderColor: '#5e07a0', borderRadius: '50%', width: '43px', maxwidth: '15%' }} inputMode="tel" pattern="[0-9]*" type="tel" onChange={onChange} />
but when i use secret it show another type in android phone
but when not using secret
Hey, is it possible to disable chrome's autocomplete password?
Any time I try writing in the pin item, it shows the dialog to fill in from passwords.
In plain HTML I tend to use autoComplete="new-password"
, seems to do the job.
Hello.
Like the title says, I am unable to style the boxes. Overriding the default styles in a new .scss file does not work. Neither does the CSS in JSX method works. Even doing 'display: none' on the component has no effect whatsoever.
Kindly guide me on how to do it. Thank you.
Hi author, may i know if this package will refactor to functional component base ?
Hello devs!
I was wondering how to set placeholders for every input, as the param "placehoder" doesn't exist.
Actually, I managed to do this with javascript, but it's not the best solution cuz when you text inside the input and delete it, the placeholder isn't there anymore:
const [inputs, setInputs] = useState([]);
useEffect(() => {
setInputs(document.getElementsByClassName('pincode-input-text'));
for (let iinput = 0; input < inputs.length; input += 1) {
inputs[i].setAttribute('placeholder', '•');
}
}, [inputs]);
Any suggestions?
When i am typing to input it suggests me to autocomplete and then to save the password. It happens only if secret is true beacause of type="password"
Using React with Next JS and everything with the component seems to be running smoothly after installation and API implementation. Now my only problem seems to be how to clear the fields. Not sure how in my React functional component to access the clear() function of the element. Any suggestions would be appreciated, thanks!
Detect enter key press in fields.
Hi,
we are using react-pin-input package with our project.
we had a requirement of showing asterisk in place of dots when user gives the Pin.
tried of overriding or doing some hack kind of thing to resolve, but none of them worked.
Can you help us by providing the feature of using asterisk within the package.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.