npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@quantfive/react-textarea-autosize

v7.1.2

Published

textarea component for React which grows with content

Downloads

109

Readme

npm version npm

react-textarea-autosize

Drop-in replacement for the textarea component which automatically resizes textarea as content changes. A native React version of the popular jQuery Autosize! Weighs 1.68KB (minified & gzipped).

This module supports IE9 and above.

import TextareaAutosize from 'react-textarea-autosize';

// If you use CommonJS syntax:
// var TextareaAutosize = require('react-textarea-autosize').default;

React.renderComponent(
  <div>
    <TextareaAutosize />
  </div>,
  document.getElementById('element')
);

Install

npm install react-textarea-autosize

Demo

https://andreypopp.github.io/react-textarea-autosize/

Props

Special props:

| prop | type | description | | ---------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | | inputRef | func | Function invoked with DOM node as argument. Default: () => {} | | maxRows | number | Maximum number of rows upto which the textarea can grow | | minRows | number | Minimum number of rows to show for textarea | | onHeightChange | func | Function invoked on textarea height change, with height as first argument and React component instance (this) as second. Default: () => {} | | useCacheForDOMMeasurements | boolean | Use object cache when computing height of textarea. Default: false |

Apart from these, the component accepts all props that are accepted by <textarea/>, like style, onChange, value, etc.

FAQ

How to focus

Get a ref to inner textarea:

<TextareaAutosize inputRef={tag => (this.textarea = tag)} />

And then call a focus on that ref:

this.textarea.focus();

To autofocus:

<TextareaAutosize autoFocus />

(all HTML attributes are passed to inner textarea)

How to test it with jest and react-test-renderer if you need ref

Because jest provides polyfills for DOM objects by requiring jsdom and react-test-renderer doesn't provide refs for rendered components out of the box (calling ref callbacks with null), you need to supply a mocked ref in your tests in you need it for your tests. You can do it like this (more can be read here):

const tree = renderer
  .create(<TextareaAutosize />, {
    createNodeMock: () => document.createElement('textarea')
  })
  .toJSON();

Development

To release patch, minor or major version:

% npm run release:patch
% npm run release:minor
% npm run release:major

This will run eslint, compile sources from src/ to dist/, bump a version in package.json and then create a new git commit with tag. If tests or linter fails — commit won't be created. If tasks succeed it publishes to npm and pushes a tag to github.