react-auto-growing-input
Version:
Auto Growing Input Component for React
2 lines (1 loc) • 1.31 kB
JavaScript
import e,{forwardRef as t,useRef as n}from"react";function i(){return i=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},i.apply(this,arguments)}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('.input-sizer{align-items:center;display:inline-grid;margin:5px;position:relative;vertical-align:top}.input-sizer input:focus{outline:none}.input-sizer input,.input-sizer:after{appearance:none;background:none;border:none;font:inherit;grid-area:1/2;margin:0;min-width:1em;padding:.25em;resize:none;width:auto}.input-sizer:after{content:attr(data-value) " ";visibility:hidden;white-space:pre-wrap}');const r=t(((t,r)=>{const{placeholder:a,size:o=4}=t,s=n(),p=r||s;return e.createElement("div",{className:"input-sizer"},e.createElement("input",i({type:"text",ref:p,onInput:e=>p.current.parentNode.dataset.value=p.current.value,size:(a?.length||0)+o},t)))}));export{r as default};