dannyradden / single-character-input-boxes Goto Github PK
View Code? Open in Web Editor NEWReact Individual Character Input Boxes
License: MIT License
React Individual Character Input Boxes
License: MIT License
I have a project which uses 8-character codes of the format [0-9]{4}[a-zA-Z]{4}
.
Since the inputRegex
property only checks for the value of a box at a time, i cannot really make it only accept codes of that format, but what i can do is use 2 4-character RICIBs in a flex-row setting.
UI-wise this works fine, however i'd like to have a way to connect the boxes so that when the first 4 boxes get filled the focus automatically jumps to the first character of the second set of boxes.
In addition, it would make easier to add helper separators such as hyphens between the boxes for the user to have it easier inputting the code.
Any help will be appreciated.
It'd be nice to have the option to auto-focus the first input box when the component mounts.
Hi, I'm evaluating your control for a project we have to input text into specific slotted positions.
We are just using CSS to position the slots on a normal input control but it doesn't match always because of proportional spacing.
Your control looks good if we can style it to just look like a horizontal line.
But I noticed when you backspace in the middle of the boxes it doesn't pull the characters after the box over to the left as expected.
Is there a way to easily support this?
I also tried to paste using your demonstration page and that didn't work. I noticed an onPaste prop so was hoping it would.
-- Update after playing around. Paste is working though it does not paste into the middle of the string of boxes.
However I don't see a way to pre-populate the boxes. I tried adding value= or defaultValue= props like a normal input control but that did not work. Perhaps this can be done some other way?
This is a show stopper for us as we save the values typed values and restore them as they go through the steps.
Thank you for creating this component.
It would be useful in my case if I was able to pass through properties to the input boxes. Specifically I am looking to set a placeholder and some custom styling.
I would expect something like:
<RICIBs
amount={3}
handleOutputString={this.handleOutput}
inputProps={ [
{ placeholder: "_", className: "color-red" },
{ placeholder: "_", styles: { "color": "blue" } },
{ placeholder: "_", styles: { "color": "green" } }
]}/>
Our app is focused on properly using a11y as best as we can. This package is phenomenal for our current feature buildout except for one issue, when using a screen reader, like chromevox, each input is read as something like "text input". This solution is fine but it would be nice if we could pass in our own aria labels for each input so screen readers can be more
i.e.:
<RICIBs
amount={2}
handleOutputString={this.handleOutput}
inputRegExp={/^[0-9]$/}
ariaLabels={[
'input box 1 of 2', 'input box 2 of 2'
]}
/>
How to collect and combine final value from inputs?
The boxes are not rendering but the cursor line is. When I type all the number are on top of each other.
Hey everyone,
Creating this issue for this bug.
I am aware that there is a bug (mostly seems to occur in Chrome) where if you type to quickly sometimes the selection will spazz out and jump between inputs. I think it is a browser bug, but if anybody has any idea how to possibly fix this let me know please!
I think it's about pressing multiple key in same moment. If there is a some timeout callback that prevents key press for a while, like 100-200 ms. It might solve this problem.
I want to change the default border outline color when the input box is focused, per box.
How can I achieve that?
Inside the code you can see the default style made by the container:
var _templateObject = _taggedTemplateLiteral(['\n margin: auto;\n margin-top: 100px;\n width: 50%;\n padding: 10px;\n text-align: center;\n'], ['\n margin: auto;\n margin-top: 100px;\n width: 50%;\n padding: 10px;\n text-align: center;\n']);
And there is an arbitrary margin-top of 100px than is letting a lot of space when using the component. I can see that the demo was able to remove it but I dont know how. What is the way to remove it?
For quick test whether results satisfy my needs, the online demo would be the best!
Thanks!
:)
Hello team,
I have added web3modal to the project and suddenly RICIBs stop working and throws an error:
`
react.development.js:1465 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (react.development.js:1465:1)
at useDebugValue (react.development.js:1529:1)
at StyledComponent.js:116:1
at O (StyledComponent.js:174:1)
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
resolveDispatcher @ react.development.js:1465
useDebugValue @ react.development.js:1529
(anonymous) @ StyledComponent.js:116
O @ StyledComponent.js:174
renderWithHooks @ react-dom.development.js:16305
updateForwardRef @ react-dom.development.js:19226
beginWork @ react-dom.development.js:21636
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
5react.development.js:1465 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (react.development.js:1465:1)
at useDebugValue (react.development.js:1529:1)
at StyledComponent.js:116:1
at O (StyledComponent.js:174:1)
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
resolveDispatcher @ react.development.js:1465
useDebugValue @ react.development.js:1529
(anonymous) @ StyledComponent.js:116
O @ StyledComponent.js:174
renderWithHooks @ react-dom.development.js:16305
updateForwardRef @ react-dom.development.js:19226
beginWork @ react-dom.development.js:21636
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performConcurrentWorkOnRoot @ react-dom.development.js:25750
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
5react-dom.development.js:18687 The above error occurred in the <styled.input> component:
at O (http://localhost:3000/static/js/bundle.js:147961:8)
at $b0601b235983fedb$var$InputBox (http://localhost:3000/static/js/bundle.js:132300:11)
at div
at div
at $ef99b842007faef5$var$ReactIndividualCharacterInputBoxes (http://localhost:3000/static/js/bundle.js:132334:5)
at div
at Test
at RenderedRoute (http://localhost:3000/static/js/bundle.js:134886:5)
at Routes (http://localhost:3000/static/js/bundle.js:135308:5)
at div
at div
at MessageProvider (http://localhost:3000/static/js/bundle.js:6585:88)
at Router (http://localhost:3000/static/js/bundle.js:135246:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:133604:5)
at Web3ModalProvider (http://localhost:3000/static/js/bundle.js:3316:84)
at App (http://localhost:3000/static/js/bundle.js:2969:72)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25892
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react.development.js:1465 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
Hi, I've tried a couple of things but can't seem to get it to do what I want. Is there a way to specify an initial output value?
For example I want the boxes to start off with a '?' in each and the output to be "?????" when the page loads.
Cheers for a great package!
please accept inputProps type="tel" or default input type="tel", instead of "text"
most of usage of this component is receive PIN, which is number
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.