react-databind demonstration custom components, https://github.com/ascpixi/react-databind

MyOwnInput.js

import React, { useState } from "react";
import "./MyOwnInput.scss";

// A simple standard callback-based text input element.
export function MyOwnInput({ value, passData }) {
    // This is to demonstrate the property and non-property callback
    // data binding. Usually, you'd either use the "value" property,
    // or not feature it at all and use a state variable.
    let [stateValue, setStateValue] = useState("");

    if (value == undefined) {
        value = stateValue;
    }

    const handleClick = (ev) => {
        ev.currentTarget.classList.add("active");
        ev.currentTarget.focus();
    };

    const handleLostFocus = (ev) => {
        ev.currentTarget.classList.remove("active");
    }

    /**
     * @param {React.KeyboardEvent} ev
     */
    const handleKeyPress = (ev) => {
        if (ev.key == "Backspace") {
            value = value.substring(0, value.length - 1);
        } else if(ev.key.length == 1) {
            value = value + ev.key;
        }

        setStateValue(value);
        if(passData) passData(value);
    }

    return (
        <div
            tabIndex="0" className="my-own-input"
            onKeyDown={handleKeyPress}
            onClick={handleClick}
            onBlur={handleLostFocus}
        >
            <span className="content">{ value }</span> <span className="caret"></span>
        </div>
    );
}

MyOwnInput.scss

.my-own-input {
    border: 1px solid lightgray;
    border-radius: 8px;
    padding: 0 3em;
    height: 2em;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    cursor: text;

    &.active, &:focus {
        border: 1px solid deepskyblue;
        outline: none;

        .caret {
            opacity: 1;
            animation: caret-blink 1s steps(1) infinite;
        }
    }

    .caret {
        opacity: 0;
        width: 1px;
        height: 1em;
        background-color: black;
    }
}

@keyframes caret-blink {
    0%  { opacity: 1; }
    50% { opacity: 0; }
}