@foreverrbum/ethsign/src/lib/components/Dashboard/DocumentInputForm.js

This package will allow you to electronically sign documents within your application

import React, { useEffect, useState } from 'react';

const DocumentInputForm = (props) => {
    const {label, showLabel, name, type, register, onChange, id, required, note, error, errorLabel} = props;
    const [focus, handleFocus] = useState(false)
    useEffect (()=>{
		if (document.getElementById(id) && required ){
            document.getElementById(id).setAttribute("required", "");
        }
	},[]);
    return(
        <div className="float-label mb-8 mt-10">
            <label className={`px-4 ${showLabel ? 'active':''}`}>
                {(showLabel || focus ) && label}
            </label>
            <input
                className={`focus:outline-none focus:ring focus:border-blue-300 w-full rounded-sm px-4 py-2 border mr-0 border-gray-200 ${error && 'ring border border-blue-300'}`}
                type={type}
                name={name}
                ref={register}
                onFocus={()=>handleFocus(true)}
                onBlur={()=>handleFocus(false)}
                onChange={()=>{onChange()}}
                id={id}
                placeholder={label}
                autoComplete="new-password"
            />
            <div className="font-normal text-15 text-gray-100 px-4 pt-2">{error? errorLabel:note}</div>
        </div>
    );
}
export default DocumentInputForm;