Section 1.1: Column Order and Offset

You can easily customize the order and offset of columns using Shards React. For example, consider the following code snippet:

import React from "react";

import { Container, Row, Col } from "shards-react";

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

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

export default function App() {

return (

<Container>

<Row>

<Col sm={{ size: 6, order: 2 }}>2</Col>

<Col sm={{ size: 6, order: 1 }}>1</Col>

</Row>

</Container>

);

}

By adjusting the order property, you can rearrange the layout of the columns. Similarly, you can modify the offset size to achieve the desired spacing.

Section 1.2: Implementing Collapse Functionality

To introduce a collapse feature in your React app using Shards React, you can utilize the Collapse component. Here’s how to do it:

import React, { useState } from "react";

import { Button, Collapse } from "shards-react";

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

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

export default function App() {

const [collapse, setCollapse] = useState(false);

const toggle = () => {

setCollapse((c) => !c);

};

return (

<>

<Button onClick={toggle}>Toggle</Button>

<Collapse open={collapse}>

<div>Lorem ipsum</div>

<div>Lorem ipsum</div>

</Collapse>

</>

);

}

In this example, the collapse state is passed to the open prop to manage the visibility of the Collapse component. Remember that Bootstrap styles are essential for optimal functionality.

Section 1.3: Adding Dropdowns

Dropdowns can be easily integrated using Shards React by employing the Dropdown, DropdownToggle, DropdownMenu, and DropdownItem components. Below is a sample implementation:

import React, { useState } from "react";

import {

Dropdown,

DropdownToggle,

DropdownMenu,

DropdownItem

} 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((c) => !c);

};

return (

<Dropdown open={open} toggle={toggle}>

<DropdownToggle>Dropdown</DropdownToggle>

<DropdownMenu>

<DropdownItem>Action</DropdownItem>

<DropdownItem>Another action</DropdownItem>

<DropdownItem>Something else here</DropdownItem>

</DropdownMenu>

</Dropdown>

);

}

Here, the Dropdown component serves as the container, while DropdownToggle and DropdownMenu manage the dropdown’s behavior.

Section 1.4: Incorporating Fade Effects

The Fade component allows you to implement a fade effect within your React application. Here’s an example:

import React, { useState } from "react";

import { Fade, Button } from "shards-react";

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

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

export default function App() {

const [visible, setVisible] = useState(false);

const toggle = () => {

setVisible((c) => !c);

};

return (

<>

<Button onClick={toggle}>Toggle</Button>

<Fade in={visible}>

<div>Lorem ipsum</div>

</Fade>

</>

);

}

In this code, a button toggles the visibility of the Fade component, while the in prop controls its display state.