Category: JavaScript

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.

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.

Radio Buttons

We can add radio button groups with React Suite’s Radio and RadioGroup components.

For instance, we can write:

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

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

The checked prop lets us make the radio button selected.

The disabled prop disables the radio button.

We can add radio button groups with the RadioGroup component.

For instance, we can write:

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

export default function App() {
  return (
    <div className="App">
      <RadioGroup name="radioList">
        <p>Group 1</p>
        <Radio value="A">Item A</Radio>
        <Radio value="B">Item B</Radio>
        <p>Group 2</p>
        <Radio value="C">Item C</Radio>
        <Radio value="D" disabled>
          Item D
        </Radio>
      </RadioGroup>
    </div>
  );
}

to add 4 radio buttons into one group.

The inline prop makes the radio buttons inline:

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

export default function App() {
  return (
    <div className="App">
      <RadioGroup name="radioList" inline>
        <p>Group 1</p>
        <Radio value="A">Item A</Radio>
        <Radio value="B">Item B</Radio>
        <p>Group 2</p>
        <Radio value="C">Item C</Radio>
        <Radio value="D" disabled>
          Item D
        </Radio>
      </RadioGroup>
    </div>
  );
}

We can set the default selected value with the defaultValue prop:

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

export default function App() {
  return (
    <div className="App">
      <RadioGroup name="radioList" inline appearance="picker" defaultValue="A">
        <p>Group 1</p>
        <Radio value="A">Item A</Radio>
        <Radio value="B">Item B</Radio>
        <p>Group 2</p>
        <Radio value="C">Item C</Radio>
        <Radio value="D" disabled>
          Item D
        </Radio>
      </RadioGroup>
    </div>
  );
}

appearance changes the appearance of the radio buttons.

'picker' turns them into buttons.

Text Input

We can add a text input into our app with the Input and InputGroup components.

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 placeholder="Input" />
    </div>
  );
}

We set the placeholder prop to show the placeholder.

To add an input with an icon at the end, we write:

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 inside>
        <Input placeholder="Input" />
        <InputGroup.Button>
          <Icon icon="search" />
        </InputGroup.Button>
      </InputGroup>
    </div>
  );
}

We add the InputGroup component to add the input group.

The inside prop lets us add content into our Input .

InputGroup.Button lets us add a button at the end of the input.

We have an Icon in the input, which will be rendered on the right side.

We can the size prop of the InputGroup to change the input size.

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

Conclusion

We can add an input field and radio button with components provided by 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.

Form

We can add forms into our React app with components provided by React Suite.

For instance, we can write:

import React from "react";
import {
  Form,
  FormGroup,
  FormControl,
  ControlLabel,
  HelpBlock,
  ButtonToolbar,
  Button
} from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Form>
        <FormGroup>
          <ControlLabel>Username</ControlLabel>
          <FormControl name="name" />
          <HelpBlock>Required</HelpBlock>
        </FormGroup>
        <FormGroup>
          <ControlLabel>Textarea</ControlLabel>
          <FormControl rows={5} name="textarea" componentClass="textarea" />
        </FormGroup>
        <FormGroup>
          <ButtonToolbar>
            <Button appearance="primary">Submit</Button>
            <Button appearance="default">Cancel</Button>
          </ButtonToolbar>
        </FormGroup>
      </Form>
    </div>
  );
}

The Form component renders into a form element.

FormGroup lets us group form control elements.

ControlLabel has the label.

FormControl has the form control.

We can render FormControl as various kinds of controls.

HelpBlock has the input hint.

ButtonToolbar lets us add a button toolbar.

ButtonGroup lets us add a button group.

componentClass lets us set the element to render the form control as.

We can set the layout to 'horizontal' to make the label and form control side by side:

import React from "react";
import {
  Form,
  FormGroup,
  FormControl,
  ControlLabel,
  HelpBlock,
  ButtonToolbar,
  Button
} from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Form layout="horizontal">
        <FormGroup>
          <ControlLabel>Username</ControlLabel>
          <FormControl name="name" />
          <HelpBlock>Required</HelpBlock>
        </FormGroup>
        <FormGroup>
          <ControlLabel>Textarea</ControlLabel>
          <FormControl rows={5} name="textarea" componentClass="textarea" />
        </FormGroup>
        <FormGroup>
          <ButtonToolbar>
            <Button appearance="primary">Submit</Button>
            <Button appearance="default">Cancel</Button>
          </ButtonToolbar>
        </FormGroup>
      </Form>
    </div>
  );
}

We can also add inline layouts with layout set to 'inline' :

import React from "react";
import {
  Form,
  FormGroup,
  FormControl,
  ControlLabel,
  ButtonToolbar,
  Button
} from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Form layout="inline">
        <FormGroup>
          <ControlLabel>Username</ControlLabel>
          <FormControl name="name" />
        </FormGroup>
        <FormGroup>
          <ControlLabel>Textarea</ControlLabel>
          <FormControl rows={5} name="textarea" componentClass="textarea" />
        </FormGroup>
        <FormGroup>
          <ButtonToolbar>
            <Button appearance="primary">Submit</Button>
            <Button appearance="default">Cancel</Button>
          </ButtonToolbar>
        </FormGroup>
      </Form>
    </div>
  );
}

Checkbox

We can add a checkbox with the Checkbox and CheckboxGroup components.

For instance, we can write:

import React from "react";
import { Checkbox } from "rsuite";

import "rsuite/dist/styles/rsuite-default.css";

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

The defaultChecked prop will make it checked by default.

We can also make it disabled with the disabled prop.

And we can make it accept an indeterminate state with the indeterminate prop.

We can get the checked value from the onChange handler.

For instance, we can write:

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

export default function App() {
  const [value, setValue] = useState([]);
  const handleChange = (value) => {
    console.log(value);
    setValue(value);
  };

  return (
    <div className="App">
      <CheckboxGroup
        inline
        name="checkboxList"
        value={value}
        onChange={handleChange}
      >
        <Checkbox value="A">Item A</Checkbox>
        <Checkbox value="B">Item B</Checkbox>
        <Checkbox value="C">Item C</Checkbox>
        <Checkbox value="D">Item D</Checkbox>
      </CheckboxGroup>
    </div>
  );
}

to get the checked values from value array parameter.

We call setValue to set the checked value as the value of the value state.

Conclusion

We can add forms and checkboxes easily into our React app with React Suite.