Getting Started with React Development with the React Suite Library — Input Picker

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.

Input Picker

We can add the InputPicker component to let users select one choice.

For instance, we can write:

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

const data = [
  {
    label: "Apple",
    value: "apple",
    role: "fruit"
  },
  {
    label: "Orange",
    value: "orange",
    role: "fruit"
  }
];

export default function App() {
  return (
    <div className="App">
      <InputPicker data={data} style={{ width: 225 }} />
    </div>
  );
}

The label property is displayed to the user.

value is the value that’s set when selected.

We can change the size with the size prop:

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

const data = [
  {
    label: "Apple",
    value: "apple",
    role: "fruit"
  },
  {
    label: "Orange",
    value: "orange",
    role: "fruit"
  }
];

export default function App() {
  return (
    <div className="App">
      <InputPicker data={data} size="lg" />
    </div>
  );
}

lg makes it large.

We can also set it to md for medium, sm for small, or xs for extra small.

Also, we can make it a block-level element with the block prop:

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

const data = [
  {
    label: "Apple",
    value: "apple",
    role: "fruit"
  },
  {
    label: "Orange",
    value: "orange",
    role: "fruit"
  }
];

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

We can add option groups with the groupBy prop:

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

const data = [
  {
    label: "Apple",
    value: "apple",
    role: "Fruit"
  },
  {
    label: "Orange",
    value: "orange",
    role: "Fruit"
  },
  {
    label: "Lettuce",
    value: "lettuce",
    role: "Vegetable"
  }
];

export default function App() {
  return (
    <div className="App">
      <InputPicker data={data} groupBy="role" />
    </div>
  );
}

We set it to the property name we want to group by.

The creatable prop lets us enter our own choice into the dropdown:

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

const data = [
  {
    label: "Apple",
    value: "apple",
    role: "Fruit"
  },
  {
    label: "Orange",
    value: "orange",
    role: "Fruit"
  },
  {
    label: "Lettuce",
    value: "lettuce",
    role: "Vegetable"
  }
];

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

We can render custom choices with the renderMenuItem prop:

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

const data = [
  {
    label: "Apple",
    value: "apple",
    role: "Fruit"
  },
  {
    label: "Orange",
    value: "orange",
    role: "Fruit"
  },
  {
    label: "Lettuce",
    value: "lettuce",
    role: "Vegetable"
  }
];

export default function App() {
  return (
    <div className="App">
      <InputPicker
        data={data}
        renderMenuItem={(label, item) => {
          return (
            <div>
              <i className="rs-icon rs-icon-user" /> {label}
            </div>
          );
        }}
        renderMenuGroup={(label, item) => {
          return (
            <div>
              <i className="rs-icon rs-icon-group" /> {label} - (
              {item.children.length})
            </div>
          );
        }}
        renderValue={(value, item, selectedElement) => {
          return (
            <div>
              <span style={{ color: "#575757" }}>
                <i className="rs-icon rs-icon-user" /> Choice:
              </span>
              {value}
            </div>
          );
        }}
      />
    </div>
  );
}

renderMenuGroup renders an option group our way.

renderValue renders the selected value.

We just return the JSX for specifying how we render the items.

Conclusion

We can add dropdowns that are customizable with React Suite.