build component

Author: ugogo

src/index.css

@@ -0,0 +1,40 @@
+.ReactVerificationCode__container {
+  display: flex;
+  position: relative;
+  width: calc(
+    var(--itemWidth) * var(--itemsCount) + var(--itemSpacing) *
+      (var(--itemsCount) - 1)
+  );
+  justify-content: space-between;
+}
+
+.ReactVerificationCode__input,
+.ReactVerificationCode__item {
+  width: var(--itemWidth);
+  height: var(--itemHeight);
+  padding: 0;
+  border-radius: 4px;
+  font-size: 1.5rem;
+  font-weight: 800;
+  line-height: var(--itemHeight);
+  text-align: center;
+}
+
+.ReactVerificationCode__item {
+  transition: box-shadow 0.2s ease-out;
+  box-shadow: 0 0 0 1px inset #ccc;
+}
+
+.ReactVerificationCode__item.is-active {
+  box-shadow: 0 0 0 2px inset #888;
+}
+
+.ReactVerificationCode__input {
+  position: absolute;
+  top: 0;
+  left: calc(
+    var(--activeIndex) * var(--itemWidth) + var(--itemSpacing) *
+      var(--activeIndex)
+  );
+  opacity: 0;
+}

src/index.tsx

@@ -1,10 +1,133 @@
 import * as React from 'react';
-import styles from './styles.module.css';
+import './index.css';
 
-interface Props {
-  text: string;
-}
+const KEY_CODE = {
+  BACKSPACE: 8,
+  ARROW_LEFT: 37,
+  ARROW_RIGHT: 39,
+  DELETE: 46,
+};
+
+export default ({ length = 4, placeholder = '·' }) => {
+  const [activeIndex, setActiveIndex] = React.useState<number>(-1);
+  const [value, setValue] = React.useState<string[]>(
+    new Array(length).fill(placeholder)
+  );
+
+  const codeInputRef = React.createRef<HTMLInputElement>();
+  const itemsRef = React.useMemo(
+    () => [...new Array(length)].map(() => React.createRef<HTMLDivElement>()),
+    [length]
+  );
+
+  const isCodeRegex = new RegExp(`^[0-9]{${length}}$`);
+
+  const getItem = (index: number) => itemsRef[index].current!;
+  const focusItem = (index: number): void => getItem(index).focus();
+  const blurItem = (index: number): void => getItem(index).blur();
+
+  const onItemFocus = (index: number) => () => {
+    setActiveIndex(index);
+    if (codeInputRef.current) codeInputRef.current.focus();
+  };
+
+  const onItemKeyUp = ({ key, keyCode }: React.KeyboardEvent) => {
+    const newValue = [...value];
+    const nextIndex = activeIndex + 1;
+    const prevIndex = activeIndex - 1;
+
+    const isLast = nextIndex === length;
+    const isDeleting =
+      keyCode === KEY_CODE.DELETE || keyCode === KEY_CODE.BACKSPACE;
+
+    // keep items focus in sync
+    onItemFocus(activeIndex);
+
+    // on delete, replace the current value
+    // and focus on the previous item
+    if (isDeleting) {
+      newValue[activeIndex] = placeholder;
+      setValue(newValue);
+
+      if (activeIndex > 0) {
+        setActiveIndex(prevIndex);
+        focusItem(prevIndex);
+      }
+
+      return;
+    }
+
+    // if the key pressed is not a number
+    // don't do anything
+    if (Number.isNaN(+key)) return;
+
+    // reset the current value
+    // and set the new one
+    if (codeInputRef.current) codeInputRef.current.value = '';
+    newValue[activeIndex] = key;
+    setValue(newValue);
+
+    if (!isLast) {
+      setActiveIndex(nextIndex);
+      focusItem(nextIndex);
+      return;
+    }
+
+    if (codeInputRef.current) codeInputRef.current.blur();
+    getItem(activeIndex).blur();
+    setActiveIndex(-1);
+  };
+
+  const onItemChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { value: changeValue } = e.target;
+    const isCode = isCodeRegex.test(changeValue);
+
+    if (!isCode) return;
+    setValue(changeValue.split(''));
+    blurItem(activeIndex);
+  };
+
+  return (
+    <div
+      className='ReactVerificationCode__container'
+      style={
+        {
+          '--activeIndex': activeIndex,
+          '--itemsCount': length,
+          '--itemWidth': '4.5rem',
+          '--itemHeight': '5rem',
+          '--itemSpacing': '1rem',
+        } as React.CSSProperties
+      }
+    >
+      <input
+        ref={codeInputRef}
+        className='ReactVerificationCode__input'
+        autoComplete='one-time-code'
+        type='text'
+        inputMode='decimal'
+        id='one-time-code'
+        // use onKeyUp rather than onChange for a better control
+        // onChange is still needed to handle the autocompletion
+        // when receiving a code by SMS
+        onChange={onItemChange}
+        onKeyUp={onItemKeyUp}
+      />
 
-export const ExampleComponent = ({ text }: Props) => {
-  return <div className={styles.test}>Example Component: {text}</div>;
+      {itemsRef.map((ref, i) => (
+        <div
+          key={i}
+          ref={ref}
+          role='button'
+          tabIndex={0}
+          className={`ReactVerificationCode__item ${
+            activeIndex === i ? 'is-active' : ''
+          }`}
+          onFocus={onItemFocus(i)}
+        >
+          {value[i] || placeholder}
+        </div>
+      ))}
+    </div>
+  );
 };