Section 1.1: Modifying Input Group Sizes

You can easily adjust the size of an input group using the size prop. For example, you might implement it as follows:

import React from "react";

import {

InputGroup,

InputGroupText,

InputGroupAddon,

FormInput

} from "shards-react";

import "bootstrap/dist/css/bootstrap.min.css";

import "shards-ui/dist/css/shards.min.css";

export default function App() {

return (

<InputGroup>

<InputGroupText>Total Amount</InputGroupText>

<FormInput placeholder="$ (USD)" />

</InputGroup>

);

}

Utilizing sm will set the input group to a smaller size, while lg will increase its size.

Section 1.2: Creating Seamless Input Groups

With the seamless prop, you can add an input group addon that appears borderless. Here’s an example:

import React from "react";

import {

InputGroup,

InputGroupText,

InputGroupAddon,

FormInput

} from "shards-react";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import { faCoffee } from "@fortawesome/free-solid-svg-icons";

import "bootstrap/dist/css/bootstrap.min.css";

import "shards-ui/dist/css/shards.min.css";

export default function App() {

return (

<InputGroup seamless>

<InputGroupAddon>

<FontAwesomeIcon icon={faCoffee} />

</InputGroupAddon>

<FormInput />

</InputGroup>

);

}

To use Font Awesome icons, install the necessary React packages by executing:

npm install --save @fortawesome/fontawesome-svg-core

npm install --save @fortawesome/free-solid-svg-icons

npm install --save @fortawesome/react-fontawesome

Section 2.1: Implementing List Groups

You can incorporate a list group into your application using ListGroup and ListGroupItem components. Here's an example:

import React from "react";

import { ListGroup, ListGroupItem } from "shards-react";

import "bootstrap/dist/css/bootstrap.min.css";

import "shards-ui/dist/css/shards.min.css";

export default function App() {

return (

<ListGroup>

<ListGroupItem>Cras justo odio</ListGroupItem>

<ListGroupItem>Dapibus ac facilisis in</ListGroupItem>

<ListGroupItem>Morbi leo risus</ListGroupItem>

</ListGroup>

);

}

Section 2.2: Adding Modals

To implement a modal in your app, you can utilize the Modal, ModalBody, and ModalHeader components. Here’s a simple implementation:

import React, { useState } from "react";

import { Button, Modal, ModalBody, ModalHeader } from "shards-react";

import "bootstrap/dist/css/bootstrap.min.css";

import "shards-ui/dist/css/shards.min.css";

export default function App() {

const [open, setOpen] = useState(false);

const toggle = () => {

setOpen((o) => !o);

};

return (

<>

<Button onClick={toggle}>Click Me</Button>

<Modal open={open} toggle={toggle}>

<ModalHeader>Header</ModalHeader>

<ModalBody>Hello there!</ModalBody>

</Modal>

</>

);

}

The button calls the toggle function to manage the modal's open state. The open prop controls whether the modal is visible, while the toggle prop connects to the toggle function.

To adjust the modal's size, simply modify the size prop as shown below:

<Modal open={open} toggle={toggle} size="sm"> // For smaller size