CODEWITHSUNDEEP
reactjstextareareact-bootstrapform-control
Paul Blart
Paul Blart

Reputation: 403

Is there a way to make a dynamic text area in react

I am playing around with React Components and I came across this website that goes over different ways to use Form Control with bootstrap styling. I want to create a text area that dynamically changes in size when user presses enter, but with the following exercise a scroll bar gets added. I could just change the number of rows, but is there a way to make the text field change in size every-time a user creates a new line

  <Form.Group controlId="exampleForm.ControlTextarea1">
    <Form.Label>Example textarea</Form.Label>
    <Form.Control as="textarea" rows={1} />
  </Form.Group>

React bootstrap examples

Thank you for your time and answer

Upvotes: 0

Views: 842

Answers (1)

Minh
Minh

Reputation: 181

This package would have the behavior you are looking for: react-textarea-autosize

For making it bootstrap-like, I'd suggest adding a bootstrap css className to this component (more info):

<TextareaAutosize className="form-control" />

Upvotes: 1

Related Questions