npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

block-code

v1.0.0

Published

A fully customizable, one-time password input component for the web built with React

Downloads

180

Readme

Live demo

Highlights

  • Easy to use
  • Fully customizable
  • React hook first
  • Separate logic and ui

Usage

Here is a quick example to get you started:

import { FC } from 'react'
import { BlockCode, IBlockCodeProps } from 'block-code'
import 'block-code/style.css'

export const YourComponent: FC<IBlockCodeProps> = props => (
  <BlockCode className="block-code-default" {...props} />
)

BlockCode provides 3 themes built-in: block-code-default, block-code-circular, block-code-underline

import { FC } from 'react'
import { BlockCode, IBlockCodeProps } from 'block-code'
import 'block-code/style.css'

export const YourComponent: FC<IBlockCodeProps> = ({
  children,
  ...restProps
}) => (
  <section>
    <BlockCode className="block-code-circular" {...restProps} />
    {children}
  </section>
)

or custom your style:

import { FC } from 'react'
import { BlockCode, IBlockCodeProps } from 'block-code'
import 'custom.css'

export const YourComponent: FC<IBlockCodeProps> = ({
  children,
  ...restProps
}) => (
  <section>
    <BlockCode className="custom" {...restProps} />
    {children}
  </section>
)

How to catch your data?

import { FC } from 'react'
import { BlockCode, IBlockCodeProps } from 'block-code'
import 'block-code/style.css'

export const YourComponent: FC<IBlockCodeProps> = props => {
  /**
   * @param data - { value, raw, onReset }
   *
   * value: The value after joining: `123456`
   *
   * raw: The raw value: ['1', '2', '3', '4', '5', '6']
   *
   * onReset: A function to reset the state, set value to empty, and set focus index to 0.
   */
  const onComplete = data => {
    // TODO:
    // Use your data here
  }

  return (
    <BlockCode
      className="block-code-default"
      onComplete={onComplete}
      {...props}
    />
  )
}

How to allow only number, or validate your data before adding into the state?

import { FC } from 'react'
import { BlockCode, IBlockCodeProps, isNumber } from 'block-code'
import 'block-code/style.css'

export const YourComponent: FC<IBlockCodeProps> = props => {
  const onValidateBeforeChange = async data => {
    /**
     * If `isNumeric` returns true, then the value will be added into the state
     *
     * You can use any condition here, `onValidateBeforeChange` asks for `Promise<boolean>`
     */
    return isNumeric(data.value)
  }

  return (
    <BlockCode
      className="block-code-default"
      onValidateBeforeChange={onValidateBeforeChange}
      {...props}
    />
  )
}

How to disable inputs?

BlockCode allows you to pass down input props

import { FC } from 'react'
import { BlockCode, IBlockCodeProps, isNumber } from 'block-code'
import 'block-code/style.css'

export const YourComponent: FC<IBlockCodeProps> = props => {
  return (
    <BlockCode
      className="block-code-default"
      inputProps={{
        disabled: true
      }}
      {...props}
    />
  )
}

How to custom my component?

BlockCode separates logic into hook useBlockCode. You can use it to custom your component

import { VFC } from 'react'
import { IBlockCodeProps, useBlockCode } from 'block-code'

export const YourComponent: VFC<IBlockCodeProps> = props => {
  const { className, ...restProps } = props
  const { ids, onCreateInputProps } = useBlockCode(restProps)

  return (
    <div className={className}>
      {ids.map((id, index) => (
        <input key={id} {...onCreateInputProps(index)} />
      ))}
    </div>
  )
}

The useBlockCode hook accept props same as BlockCode component which is IBlockCodeProps. It returns:

values,
setValues,
setActiveIndex,
refs,
onSetValueAtIndex,
onSetActiveIndex,
onResetValues,
onReset,
onPaste,
onNextFocusAfterChangingValue,
onKeyDown,
onInput,
onEnoughData,
onCreateRef,
onCreateInputProps,
onCheckValue,
onAfterAddingValue,
onAddValue,
initState,
initActiveIndex,
ids,
activeIndex

API

  • maxInputs - Number of inputs to be rendered.
    • Default: 6
  • inputProps - Input props will be passed into <input />
    • Default:
      {
        "maxLength": 1,
        "className": "input"
      }
  • autoFocus - Auto focus on the first input
    • Default: true
  • onValuesChange - A function will be called when the value got changed
    • Default: none
  • onInputChange - A function will be called when onInput and onKeyDown got triggered
    • Default: none
  • onValidateBeforeChange - A function will be called to validate the value before adding into state. If you don't provide validate function, all values will be allowed
    • Default: none
  • onComplete - A function will be called only when the data is enough. It will pass the data to you. The data is enough when fits the condition below:
    • maxInputs * inputProps.maxLength. For example maxnInputs is 6 and inputProps.maxLength is 1. The onComplete will be triggered if the value has length is 6
    • Default: none
  • Default: none

License

This project is licensed under the terms of the MIT license.