custom-code-input

A customizable code input component for React, Angular, Vue.js, and plain JavaScript.

Installation

To install the package, run the following command:

npm install custom-code-input

Usage

React

First, import the CodeInput component and the CSS file:

import React, { useState } from 'react';
import CodeInput from 'custom-code-input';
import 'custom-code-input/dist/index.css';

const App = () => {
    const [values, setValues] = useState(['', '', '', '', '', '']);
    const expectedCode = "123456";

    const handleSubmit = () => {
        alert('Code submitted: ' + values.join(''));
    };

    return (
        <div className="app-container">
            <CodeInput
                title="Enter Code"
                showTitle={true}
                titleAlignment="center"
                titleStyle={{ fontSize: '24px', color: 'black', marginBottom: '12px' }}
                confirmationText="Didn't receive the code?"
                actionElement={<button onClick={() => alert('Code resent')} style={{ color: 'black', backgroundColor: 'transparent', border: 'none', textDecoration: 'underline', cursor: 'pointer' }}>Resend</button>}
                values={values}
                setValues={setValues}
                inputStyle={{ border: '2px solid black', borderRadius: '4px', width: '30px', height: '35px', color: 'black', backgroundColor: 'white' }}
                inputClassName="custom-input"
                containerStyle={{ padding: '20px', border: 'none' }}
                containerClassName="custom-container"
                titleClassName="custom-title"
                confirmationTextStyle={{ color: 'black' }}
                confirmationTextClassName="custom-confirmation-text"
                inputFontSize="18px"
                inputFontWeight="bold"
                validationType="numbers"
                onSubmit={handleSubmit}
                expectedCode={expectedCode}
            />
        </div>
    );
};

export default App;

Angular

Install the necessary packages:

npm install custom-code-input react react-dom

// src/app/react-wrapper/react-wrapper.component.ts
import { Component, ElementRef, Input, OnInit } from '@angular/core';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import CodeInput from 'custom-code-input';
import 'custom-code-input/dist/index.css';

@Component({
  selector: 'app-react-wrapper',
  template: '<div [id]="rootId"></div>',
})
export class ReactWrapperComponent implements OnInit {
  @Input() title: string;
  @Input() expectedCode: string;

  rootId = `react-root-${Math.random().toString(36).substr(2, 9)}`;

  constructor(private host: ElementRef) {}

  ngOnInit(): void {
    this.render();
  }

  private render() {
    const props = {
      title: this.title,
      expectedCode: this.expectedCode,
      showTitle: true,
      titleAlignment: 'center',
      confirmationText: "Didn't receive the code?",
      actionElement: React.createElement('button', {
        onClick: () => alert('Code resent')
      }, 'Resend'),
      values: Array(6).fill(''),
      setValues: (newValues) => {
        this.values = newValues;
        this.render();
      },
      inputStyle: {
        border: '2px solid black',
        borderRadius: '4px',
        width: '30px',
        height: '35px',
        color: 'black',
        backgroundColor: 'white'
      },
      inputFontSize: '18px',
      inputFontWeight: 'bold',
      validationType: 'numbers',
      onSubmit: () => alert('Code submitted: ' + this.values.join('')),
      numInputs: 6
    };

    ReactDOM.render(React.createElement(CodeInput, props), this.host.nativeElement.querySelector(`#${this.rootId}`));
  }
}

<!-- src/app/app.component.html -->
<app-react-wrapper title="Enter Code" expectedCode="123456"></app-react-wrapper>

Vue.js

Install the necessary packages:

npm install custom-code-input react react-dom

<!-- src/components/ReactWrapper.vue -->
<template>
  <div ref="reactRoot"></div>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import CodeInput from 'custom-code-input';
import 'custom-code-input/dist/index.css';

export default defineComponent({
  name: 'ReactWrapper',
  props: {
    title: {
      type: String,
      required: true
    },
    expectedCode: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const reactRoot = ref(null);

    onMounted(() => {
      const reactProps = {
        title: props.title,
        expectedCode: props.expectedCode,
        showTitle: true,
        titleAlignment: 'center',
        confirmationText: "Didn't receive the code?",
        actionElement: React.createElement('button', {
          onClick: () => alert('Code resent')
        }, 'Resend'),
        values: Array(6).fill(''),
        setValues: (newValues) => {
          this.values = newValues;
          this.render();
        },
        inputStyle: {
          border: '2px solid black',
          borderRadius: '4px',
          width: '30px',
          height: '35px',
          color: 'black',
          backgroundColor: 'white'
        },
        inputFontSize: '18px',
        inputFontWeight: 'bold',
        validationType: 'numbers',
        onSubmit: () => alert('Code submitted: ' + this.values.join('')),
        numInputs: 6
      };

      ReactDOM.render(React.createElement(CodeInput, reactProps), reactRoot.value);
    });

    return { reactRoot };
  }
});
</script>

<!-- src/App.vue -->
<template>
  <div id="app">
    <ReactWrapper title="Enter Code" expectedCode="123456" />
  </div>
</template>

<script>
import ReactWrapper from './components/ReactWrapper.vue';

export default {
  name: 'App',
  components: {
    ReactWrapper
  }
};
</script>

Props

Development

To develop and build the package, run the following commands:

Install dependencies

npm install

Build the package

npm run build

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Francisco Caballero Portero