Scrollable Content

import React from 'react'
import { Card } from 'react-bootstrap'
import SimpleBar from 'simplebar-react'

const ScrollableCard = () => {
  return (
    <Card>
        <Card.Header>
            Card Header
        </Card.Header>
        <Card.Body as={SimpleBar} className="nicescroll-bar h-150p">
            <Card.Title as="h5" >Special title treatment</Card.Title>
            <Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
            <Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
            <Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
            <Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
        </Card.Body>
        <Card.Footer className="text-muted">
            Card Footer
        </Card.Footer>
    </Card>
  )
}

export default ScrollableCard

import React from 'react'
import { Col, Row } from 'react-bootstrap'
import SimpleBar from 'simplebar-react'

const ScrollXandY = () => {
  return (
    <Row>
        <Col>
            <SimpleBar className="nicescroll-bar h-200p">
                <div style={{ width: 2000 }}>
                    <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>
                    <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>
                    <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>
                </div>
            </SimpleBar>
        </Col>
    </Row>
  )
}

export default ScrollXandY

import React from 'react'
import { Button, Modal } from 'react-bootstrap'
import SimpleBar from 'simplebar-react'

const ScrollableModalAndDrawers = () => {
  return (
    <>
        // Modal Scroll
        <Modal show={showModal} onHide={() => setShowModal(!showModal)} >
            <Modal.Header>
                <Modal.Title as="h5">Modal Header</Modal.Title>
                <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </Modal.Header>
            <Modal.Body>
                <SimpleBar className="nicescroll-bar h-300p">
                    <div className="pa-20">
                        <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>
                    </div>
                </SimpleBar>
            </Modal.Body>
            <Modal.Footer>
                <Button variant="primary" className="me-2" onClick={() => setShowModal(!showModal)}>Continue</Button>
                <Button variant="outline-secondary" onClick={() => setShowModal(!showModal)}>Decline</Button>
            </Modal.Footer>
        </Modal>

        //Drawer Overlay Right
        <div id="drawer_overlay_right" className={classNames("hk-drawer drawer-right", { "drawer-toggle": showDrawer })}>
            <div className="drawer-header">
                <div className="drawer-text">Drawer Overlay</div>
                <button type="button" className="drawer-close btn-close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div className="drawer-body">
                <SimpleBar className="nicescroll-bar">
                    <div className="drawer-content-wrap">
                        <div id="section1" className="pt-5">
                            <h6 className="sub-heading  sub-heading-uppercase text-theme">section 1.0</h6>
                            <h2>High quallity bootstrap template</h2>
                            <p className="p-xl">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,</p>
                        </div>
                        <div className="hk-separator-full my-5" />
                        <div id="section2">
                            <h6 className="sub-heading  sub-heading-uppercase text-theme">section 2.0</h6>
                            <h2>Start your next web project</h2>
                            <p className="p-xl">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,</p>
                        </div>
                    </div>
                </SimpleBar>
            </div>
        </div>
    </>
  )
}

export default ScrollableModalAndDrawers