Scrollbar

The RhScrollbar is a component that is used for adding a scrollbar to a web application. The scrollbar is displayed when the content exceeds the height of the component, allowing the user to scroll through the content. RhScrollbar improves the user experience when dealing with long or large amounts of content.

Usage

Once installed, you can import the RhScrollbar component into your React application:

copy
import {RhScrollbar} from "@rhythm-ui/react"

Then, you can use the RhScrollbar component in your JSX code:

copy
<RhScrollbar style={{ height: "300px", padding: "5px" }}>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat voluptas
    magnam, veritatis maxime delectus soluta eaque libero aliquam corrupti? Amet
    qui tempore, enim excepturi provident cupiditate aliquid perspiciatis odio
    architecto? Itaque nostrum error perspiciatis ipsam laboriosam molestiae
    quam incidunt nemo facere dolorum, veniam aliquam assumenda natus accusamus.
    Soluta excepturi ad nulla possimus laboriosam ipsum nam saepe qui ex fuga.
    Quae. Eos possimus eaque facere similique, sed cum veritatis dolor rerum
    fugiat. Nemo, temporibus repudiandae. Quibusdam explicabo necessitatibus
    illum, ipsam eligendi commodi ducimus labore quisquam corrupti nisi harum
    vero delectus modi! Dignissimos eaque, est vero sequi consectetur minus
    explicabo laborum tempora quo, officia voluptatem natus, animi tenetur
    dolore molestias. Culpa, id saepe optio aut recusandae officiis dicta
    perspiciatis sunt inventore repellendus. Debitis est non officiis
    accusantium, nihil alias quisquam voluptatibus amet fugiat facilis illo sed
    et quia ipsa modi voluptatem molestias, vitae iste illum fugit voluptate,
    laborum neque. Nam, animi nostrum. Dicta corrupti, asperiores dolorum
    similique sint nam dolorem odit, repudiandae accusamus, autem earum
    quibusdam libero repellat dolores adipisci iusto necessitatibus nulla enim
    veniam? Corrupti porro itaque pariatur repudiandae maxime fuga! Laudantium
    blanditiis soluta iure ea deleniti doloremque consequatur dolorum odit
    cupiditate. Accusantium eius consequatur obcaecati eos fugit minima a
    dignissimos laboriosam quis sapiente consectetur porro placeat ratione
    quibusdam, laudantium omnis. Quas, dolorum ut assumenda ipsum cupiditate
    corporis rerum quasi expedita fugit laboriosam voluptatum eligendi a sint in
    quisquam totam. Praesentium deserunt laboriosam nostrum quibusdam non natus
    consequuntur temporibus voluptatibus voluptate! Rem debitis numquam
    cupiditate quibusdam sunt porro ea dolores minima, tenetur dignissimos unde
    officiis provident hic consequuntur sequi ullam impedit libero quod ipsa
    error officia laborum, beatae at quis! Vitae? Cumque consequatur molestiae
    minima tempore perferendis quidem facilis totam quis, doloremque similique
    voluptate ad quasi. Doloremque, sit incidunt minima eius sequi totam iusto
    similique quis, soluta necessitatibus quae quas nam. Pariatur voluptas
    inventore dolor dicta illum vel assumenda nemo quas expedita, est doloribus
    voluptatibus animi odio soluta dignissimos tenetur deserunt molestias
    mollitia et ex quia nobis? Vero accusantium deleniti voluptatibus! Ad et
    expedita reprehenderit. Et aspernatur iure asperiores at esse voluptate
    officiis saepe obcaecati beatae, nulla optio libero cum? Eum voluptatem sed
    voluptas molestiae consequuntur consequatur corrupti, necessitatibus
    officiis voluptatum? Nihil quibusdam at voluptate quae voluptatem temporibus
    nisi excepturi porro aliquid quas amet voluptates reiciendis maxime quidem
    dicta magni adipisci vel beatae iusto pariatur, distinctio veritatis iure
    hic ipsa. Quibusdam! Obcaecati veniam necessitatibus a impedit sunt ipsum
    facere vel rem beatae nam, unde accusantium ut itaque velit accusamus esse
    temporibus natus consequuntur harum error. Dignissimos alias optio eligendi
    officia iure? Assumenda debitis enim, dicta, quibusdam itaque, eaque tempora
    ipsam consequatur ea temporibus corrupti illo. Vitae ullam molestias
    perferendis accusamus blanditiis dolorum libero possimus esse cupiditate
    harum velit deserunt, id dignissimos? Illo nam nesciunt debitis delectus
    assumenda quae iure laboriosam aut consequuntur doloribus cupiditate
    explicabo fugit suscipit, ipsum atque. Rem aut dolorem corporis iste debitis
    laudantium et? Ducimus provident quis inventore. Veritatis quo eligendi,
    ullam sequi inventore corrupti ut placeat iste error cupiditate, soluta
    quam, officiis repellendus sunt suscipit dicta vel similique reiciendis
    recusandae ipsa minima porro. Eligendi ad doloremque consequuntur. Dolorem,
    esse. Iure tempora, adipisci quidem fuga earum reiciendis, necessitatibus,
    pariatur delectus hic aliquam sapiente. Eius voluptates ex veritatis fuga
    placeat quae nulla quod accusantium sed optio! Doloremque, nisi sunt!
    Suscipit porro voluptatem nemo corrupti harum sit facere? Molestiae libero
    incidunt, officia sapiente repellendus amet vel tenetur, porro, labore
    consequatur iste atque provident natus optio enim iusto quibusdam esse
    ducimus! Maiores, quo neque dolor, fugit a earum ut aliquid tempore ad eius
    amet quae magni sed minima quia suscipit! Vel nisi modi atque. Nemo impedit
    ex error omnis facilis vel?
  </p>
</RhScrollbar>

Scrollbar Props

classNamestringCustom classnames
styleCSSPropertiesIt used to provide inline css to scrollbar
childrenReact.ReactNodeReact Node
scrollRefobjectref