React Individual Character Input Boxes

Last update: Dec 13, 2022

Overview

react-individual-character-input-boxes

React Individual Character Input Boxes (RICIBs) are individual inputs that are separate from each other but functionally act similar as a regular input box. Motivation came from Apples similar input boxes used for their two-factor authorization:

Demo

You can view a demo of this component here!

Installation

$ npm i --save react-individual-character-input-boxes

How To Use

Import:

import RICIBs from 'react-individual-character-input-boxes';

Example code:

) } ">

handleOutput (string) {
    // Do something with the string
  }

  render () {
    return (
      <div>
        <RICIBs
          amount={5}
          autoFocus
          handleOutputString={this.handleOutput}
          inputProps={[
            { className: "first-box" },
            { style: { "color": "orange" } },
            { placeholder: "_" }
          ]}
          inputRegExp={/^[0-9]$/}
        />
      </div>
    )
  }

Props:

Prop	Type	Required	Description
`amount`	Number		sets the number of input boxes. (default is 5)
`autoFocus`	Boolean		When true, the first input box will automatically be selected on page load. (default false)
`handleOutputString`	Function	✓	Implement it to handle the string output of the module.
`inputProps`	Array		Allows you to pass through properties to the input boxes.
`inputRegExp`	RegExp		Tells the component which characters to allow as inputs. (default is `/^[0-9]$/` which is only numbers)
`password`	Boolean		Masks in the input if set as true (default is false)

Help, I cant get it to work or I want a feature!

Please feel free to submit an issue if you are running into trouble or have an idea for additional functionality!

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!

TODO

Fix possible android and iphone bugs
Allow paste (onPaste) with any input selected

License

Comments

Feature request - input props

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" } }
        ]}/>

opened by linusnorton 7

onPaste feature

Placing the copied text in boxes according to regex. It inserts the copied text from the beginning. If text is longer than the specified length, it crops the text.

opened by buraketmen 2
Bump minimist from 1.2.5 to 1.2.6
Bumps minimist from 1.2.5 to 1.2.6.

Commits

7efb22a 1.2.6

ef88b93 security notice for additional prototype pollution issue

c2b9819 isConstructorOrProto adapted from PR

bc8ecee test from prototype pollution PR

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
Bump browserslist from 4.13.0 to 4.16.6
Bumps browserslist from 4.13.0 to 4.16.6.

Changelog

Sourced from browserslist's changelog.

4.16.6

Fixed npm-shrinkwrap.json support in --update-db (by Geoff Newman).

4.16.5

Fixed unsafe RegExp (by Yeting Li).

4.16.4

Fixed unsafe RegExp.

Added artifactory support to --update-db (by Ittai Baratz).

4.16.3

Fixed --update-db.

4.16.2

Fixed --update-db (by @ialarmedalien).

4.16.1

Fixed Chrome 4 with mobileToDesktop (by Aron Woost).

4.16

Add browserslist config query.

4.15

Add TypeScript types (by Dmitry Semigradsky).

4.14.7

Fixed Yarn Workspaces support to --update-db (by Fausto Núñez Alberro).

Added browser changes to --update-db (by @AleksandrSl).

Added color output to --update-db.

Updated package.funding to have link to our Open Collective.

4.14.6

Fixed Yarn support in --update-db (by Ivan Storck).

Fixed npm 7 support in --update-db.

4.14.5

Fixed last 2 electron versions query (by Sergey Melyukov).

4.14.4

Fixed Unknown version 59 of op_mob error.

4.14.3

Update Firefox ESR.

4.14.2

Fixed --update-db on Windows (by James Ross).

Improved --update-db output.

4.14.1

Added --update-db explanation (by Justin Zelinsky).

... (truncated)

Commits

6fe3614 Release 4.16.6 version

33ebac9 Update dependencies

2128170 Add support for npm-shrinkwrap files alongside package-lock (#595)

7cc2aed Release 4.16.5 version

27e4afd Update dependencies

1013a18 Fix version RegExp

b879a1a Use Node.js 16 on CI

bd1e9e0 Fix ReDoS (#593)

209adf9 Release 4.16.4 version

3e2ae3b Fix types

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
Bump hosted-git-info from 2.8.8 to 2.8.9
Bumps hosted-git-info from 2.8.8 to 2.8.9.

Changelog

Sourced from hosted-git-info's changelog.

2.8.9 (2021-04-07)

Bug Fixes

backport regex fix from #76 (29adfe5), closes #84

Commits

8d4b369 chore(release): 2.8.9

29adfe5 fix: backport regex fix from #76

See full diff in compare view

Maintainer changes

This version was pushed to npm by nlf, a new releaser for hosted-git-info since your current version.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
Bump lodash from 4.17.19 to 4.17.21
Bumps lodash from 4.17.19 to 4.17.21.

Commits

f299b52 Bump to v4.17.21

c4847eb Improve performance of toNumber, trim and trimEnd on large input strings

3469357 Prevent command injection through _.template's variable option

ded9bc6 Bump to v4.17.20.

63150ef Documentation fixes.

00f0f62 test.js: Remove trailing comma.

846e434 Temporarily use a custom fork of lodash-cli.

5d046f3 Re-enable Travis tests on 4.17 branch.

aa816b3 Remove /npm-package.

See full diff in compare view

Maintainer changes

This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
Bump y18n from 4.0.0 to 4.0.1
Bumps y18n from 4.0.0 to 4.0.1.

Changelog

Sourced from y18n's changelog.

Change Log

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

5.0.5 (2020-10-25)

Bug Fixes

address prototype pollution issue (#108) (a9ac604)

5.0.4 (2020-10-16)

Bug Fixes

exports: node 13.0 and 13.1 require the dotted object form with a string fallback (#105) (4f85d80)

5.0.3 (2020-10-16)

Bug Fixes

exports: node 13.0-13.6 require a string fallback (#103) (e39921e)

5.0.2 (2020-10-01)

Bug Fixes

deno: update types for deno ^1.4.0 (#100) (3834d9a)

5.0.1 (2020-09-05)

Bug Fixes

main had old index path (#98) (124f7b0)

5.0.0 (2020-09-05)

⚠ BREAKING CHANGES

exports maps are now used, which modifies import behavior.

drops Node 6 and 4. begin following Node.js LTS schedule (#89)

Features

add support for ESM and Deno #95) (4d7ae94)

... (truncated)

Commits

See full diff in compare view

Maintainer changes

This version was pushed to npm by oss-bot, a new releaser for y18n since your current version.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
Bump elliptic from 6.5.3 to 6.5.4
Bumps elliptic from 6.5.3 to 6.5.4.

Commits

43ac7f2 6.5.4

f4bc72b package: bump deps

441b742 ec: validate that a point before deriving keys

e71b2d9 lib: relint using eslint

8421a01 build(deps): bump elliptic from 6.4.1 to 6.5.3 (#231)

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
Bump acorn from 5.7.3 to 5.7.4
Bumps acorn from 5.7.3 to 5.7.4.

Commits

6370e90 Mark version 5.7.4

fbc15b1 More rigorously check surrogate pairs in regexp validator

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
Basic types to make TypeScript happy

Hello!

I defined these types to make my project happy with this component and thought you'd like them! I can always PR up against the DefinitelyType repo instead!

opened by illepic 0
Complete v1.0.0
Updated lots of packages

Changed from webpack to parcel

Moved react and reactDom to peerDeps (Should fix a lot of bugs and reduce module size greatly. However, you now need to be using React v16.8.0 or higher)

Moved styled-components and prop-typed to devDeps

More changes coming soon
opened by dannyradden 0
Evaluated for use: No way to prepoulate values, backspace does not behave as expected

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.

opened by bcowgill 0
Link multiple RICIBs together?

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.

opened by apachejuice 0
Problem when add web3modal to package.json
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:

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 beginWork$1 (react-dom.development.js:27426:1) at performUnitOfWork (react-dom.development.js:26557:1) at workLoopSync (react-dom.development.js:26466:1) `
opened by hashemnik 2
The component adds by default a margin of 100px that cannot be removed easily

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?

opened by marianolc 1
Initial value of output

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!

opened by justinhj 3

Releases(v1.2.1)

v1.2.1(Sep 16, 2022)
Fix problem with using inputProps prop and clear up ReadMe for its usage 66b1deb

Fix builds with types added 7af2d65

Merge pull request #15 from illepic/feature/types 9748531

Merge branch 'master' into feature/types 4dfcfed

inputProps type a4ded4a

Basic types to make TypeScript happy c9ffc95

https://github.com/dannyradden/single-character-input-boxes/compare/v1.2.0...v1.2.1
Source code(tar.gz)
Source code(zip)
v1.2.0(Sep 15, 2022)
Update ReadMe 7cff4aa

Merge branch 'master' of https://github.com/buraketmen/single-character-input-boxes into buraketmen-master 2ff13ef

onPaste feature 68e380c

https://github.com/dannyradden/single-character-input-boxes/compare/v1.1.6...v1.2.0
Source code(tar.gz)
Source code(zip)
v1.1.6(Sep 15, 2022)
Use 'main' to build as library dd6f79c

Set target 'main' to true for building as a library 6c01763

Change demo link on ReadMe 3ba4754

Do not use main for Amplify 37e66c0

Change demo output folder 016749f

Update package.json to fix amplify deploy problems and remove no longer needed dev dependencies a22a748

https://github.com/dannyradden/single-character-input-boxes/compare/v1.1.5...v1.1.6
Source code(tar.gz)
Source code(zip)
v1.1.5(Sep 14, 2022)
Change to parcel build for production 0fea130

https://github.com/dannyradden/single-character-input-boxes/compare/v1.1.4...v1.1.5
Source code(tar.gz)
Source code(zip)
v1.1.4(Sep 14, 2022)
Attempt to fix publishing 6fbd526

remove process package 392efc8

update packages and change to using parcel to build prod files eccb7a2

https://github.com/dannyradden/single-character-input-boxes/compare/v1.1.0...v1.1.4
Source code(tar.gz)
Source code(zip)
v1.1.0(Aug 25, 2020)
Add an inputProp prop that allows user to pass props to the boxes fdd2425

Add a publish script 728a74b

https://github.com/dannyradden/single-character-input-boxes/compare/v1.0.8...v1.1.0
Source code(tar.gz)
Source code(zip)
v1.0.8(Jul 16, 2020)
Add .fill pilyfill for IE support. 930bb11

Add spacebar functionality and fix bug with demo where inputs after #5 dont function correctly. 77c5b61

Switch readme image to github CDN hosted 750622f

Add keywords to package.json ba626d3

https://github.com/dannyradden/single-character-input-boxes/compare/v1.0.6...v1.0.8
Source code(tar.gz)
Source code(zip)
v1.0.6(Jul 15, 2020)
Remove some styling from module to increase user flexibility. Fix minor styling problems with demo. a40b352

Update demo link 71c9fb7

Update readme, Add info to demo, Add prod script 951d6fb

convert InputBox class to functional component 5491610

https://github.com/dannyradden/single-character-input-boxes/compare/v1.0.5...v1.0.6
Source code(tar.gz)
Source code(zip)
v1.0.5(Jul 10, 2020)
Remove accidental inclusion of package tar. f9584e3

https://github.com/dannyradden/single-character-input-boxes/compare/v1.0.3...v1.0.5
Source code(tar.gz)
Source code(zip)
v1.0.3(Jul 10, 2020)
Update packages 71ace98

https://github.com/dannyradden/single-character-input-boxes/compare/v1.0.1-0...v1.0.3
Source code(tar.gz)
Source code(zip)