Getting Started with React Development with the React Suite Library —  Select Dropdown

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.

Select Dropdown

We can add a select dropdown into our React app with the SelectPicker component.

For instance, we can write:

import React from "react";
import { SelectPicker } 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">
      <SelectPicker data={data} />
    </div>
  );
}

to add a simple dropdown.

label is displayed to the user.

And value is used as the selected value when we select an item.

The appearance prop changes the look of the dropdown:

import React from "react";
import { SelectPicker } 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">
      <SelectPicker data={data} appearance="subtle" />
    </div>
  );
}

Setting appearance to 'subtle' makes it gray.

The size prop changes the size of the dropdown:

import React from "react";
import { SelectPicker } 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">
      <SelectPicker data={data} size="lg" />
    </div>
  );
}

lg makes it big. md makes it medium-sized. sm makes it small, and xs makes it extra small.

The block prop makes it display as a block-level element:

import React from "react";
import { SelectPicker } 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">
      <SelectPicker data={data} block />
    </div>
  );
}

The groupBy prop lets us set the property name from the object in the data array to group the options by:

import React from "react";
import { SelectPicker } 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">
      <SelectPicker data={data} groupBy="role" />
    </div>
  );
}

We can change the placement with the placement prop:

import React from "react";
import { SelectPicker } 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">
      <SelectPicker data={data} placement="rightStart" />
    </div>
  );
}

The full list of possible values for placement is at https://rsuitejs.com/components/select-picker/.

Conclusion

We can add a select dropdown into our React app with React Suite.