Getting Started with React Development with the React Suite Library — Text Areas and Numeric Inputs

React Suite is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Text Area

We can add a text area with the Input component.

For instance, we can write:

import React from "react";
import { Input } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Input componentClass="textarea" rows={3} placeholder="Textarea" />
    </div>
  );
}

We set the componentClass to 'textarea' so that it’ll be rendered as a text area.

rows have the number of rows for the text area.

We can disable the input with the disabled prop:

import React from "react";
import { Input } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Input disabled />
    </div>
  );
}

We can also add disabled to an InputGroup :

import React from "react";
import { Input, InputGroup, Icon } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <InputGroup disabled>
        <Input />
        <InputGroup.Addon>
          <Icon icon="search" />
        </InputGroup.Addon>
      </InputGroup>
    </div>
  );
}

Also, we can add a button that comes with a tooltip with the speaker prop:

import React from "react";
import { Input, Whisper, Tooltip } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Whisper trigger="focus" speaker={<Tooltip>Required</Tooltip>}>
        <Input style={{ width: 300 }} placeholder="Default Input" />
      </Whisper>
    </div>
  );
}

Number Input

Thee InputNumber component lets us add a numeric input into our React app.

For instance, we can write:

import React from "react";
import { InputNumber } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <InputNumber />
    </div>
  );
}

to add it.

We can change its size with the size prop.

xs is extra small. sm is small. md is medium and lg is large.

Also, we can change the default value and step to snap to of the numeric input with the defaultValue and snap props:

import React from "react";
import { InputNumber } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <InputNumber defaultValue={0.01} step={0.01} />
    </div>
  );
}

We can restrict the number that can be chosen with the min and max props:

import React from "react";
import { InputNumber } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <InputNumber defaultValue={10} max={100} min={10} />
    </div>
  );
}

The disabled prop disables the input.

The prefix prop lets us add content to the left of the input:

import React from "react";
import { InputNumber } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <InputNumber prefix="$" />
    </div>
  );
}

The postfix prop does the same but adds the content to the right of the input.

Also, we can make it a controlled input with the value and onChange props:

import React, { useState } from "react";
import { InputNumber } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const [value, setValue] = useState();

  const handleChange = (val) => {
    setValue(val);
  };

  return (
    <div className="App">
      <InputNumber value={value} onChange={handleChange} />
    </div>
  );
}

The val parameter has the inputted value.

value sets the value of the input.

Conclusion

We can add text areas and numeric inputs with React Suite.