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.
Once installed, you can import the RhScrollbar component into your React application:
import {RhScrollbar} from "@rhythm-ui/react"
Then, you can use the RhScrollbar component in your JSX code:
<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>
Name | Type | Default | Description |
---|---|---|---|
className | string | Custom classnames | |
style | CSSProperties | It used to provide inline css to scrollbar | |
children | React.ReactNode | React Node | |
scrollRef | object | ref |