Category: React Suite

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.

Quasar is a popular Vue UI library for developing good looking Vue apps.

In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.

Controlled Input Picker

We can add a controlled input picker with the value and onChange props.

For instance, we can write:

import React, { useState } 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() {
  const [value, setValue] = useState();

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

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

value has the selected value.

handleChange has the val parameter to let us get the value from the input picker.

Then we can use that to set the value with setValue .

Tag Picker

We can add a dropdown to let us select tags with the TagPicker component.

For instance, we can write:

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

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

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

to add the tag picker.

The data prop lets us set the data we can select.

To change the size of the tag picker, we add the size prop:

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

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

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

lg makes it large.

We can also set it to xs to make it extra small, sm to make it small, and md to make it medium-sized.

The block prop lets us make the tag picker displayed as a block-level element.

For instance, we can write:

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

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

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

We can group the options with the groupBy prop:

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

Conclusion

We can add controlled input pickers and tag pickers into our React app with React Suite.

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.

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.

AutoComplete

We can add an autocomplete input into our React app with the AutoComplete component.

For instance, we can write:

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

const data = ["apple", "orange", "grape"];

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

We pass the data into the data prop to display the autocomplete choices.

We can render a custom item with the renderItem prop:

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

const data = ["apple", "orange", "grape"];

export default function App() {
  return (
    <div className="App">
      <AutoComplete
        data={data}
        renderItem={(item) => {
          return (
            <div>
              <Icon icon="star" /> {item.label}
            </div>
          );
        }}
      />
    </div>
  );
}

The disabled prop disables the autocomplete.

Also, we can add autocomplete into input groups:

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

const data = ["apple", "orange", "grape"];

export default function App() {
  return (
    <div className="App">
      <InputGroup inside>
        <AutoComplete data={data} />
        <InputGroup.Button>
          <Icon icon="search" />
        </InputGroup.Button>
      </InputGroup>
    </div>
  );
}

We can make it a controlled input by setting the value and onChange props:

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

const data = ["apple", "orange", "grape"];

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

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

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

value has the inputted value, which we set with tyhe handleChange function.

val has the inputted value, so we can call setValue to set value.

Toggle

We can add a toggle with the Toggle component.

For instance, we can write:

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

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

defaultChecked will make it checked by default.

The size prop lets us set the size of the toggle:

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

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

lg makes it large. sm makes it small. md makes it medium.

We can add text to the toggle and they’re displayed according to whether it’s checked or not.

For instance, we can write:

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

export default function App() {
  return (
    <div className="App">
      <Toggle size="lg" checkedChildren="Open" unCheckedChildren="Close" />
    </div>
  );
}

checkedChildren is displayed when it’s checked and unCheckedChildren is displayed when it’s not.

The disabled prop disables the toggle.

Conclusion

We can add autocomplete and toggles into our React app with React suite.

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.