Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-custom-scroll
Advanced tools
[![NPM version][npm-image]][npm-url] ![](https://github.com/rommguy/react-custom-scroll/workflows/build/badge.svg) ![](https://img.shields.io/npm/dw/react-custom-scroll)
Readme
An easily designable, cross browser (!!), custom scroll with ReactJS.
The actual scroll is still the native one - Meaning the scroll animations and scroll rate work as always The only thin that is different is the visible design and scrollbar layout.
npm i react-custom-scroll --save
Custom scroll component is available in module or commonJS format.
It is located in /dist directory
From unpkg cdn:
Wrap your content with the custom scroll component
Remove any overflow style properties from your content root component - The custom scroll will take care of it
import { CustomScroll } from "react-custom-scroll";
<CustomScroll>
your content
</CustomScroll>
Your own custom design can be applied by styling these 2 classes in your css:
You can see a usage example in the demo page.
<CustomScroll heightRelativeToParent="calc(100% - 20px)">
your content
</CustomScroll>
There are some details that apply when using customScroll on elements with size set by css flex.
Here is an example for an HTML structure before using customScroll:
<SomeParent style="display: flex; height: 500px;">
<FixedHeightElement style="height: 100px"><FixedHeightElement />
<FlexibleHeightElement style="flex:1; overflow:scroll">
your content (with enough height to cause a scroll)
<FlexibleHeightElement />
</SomeParent>
In this example, a scroll is active on the flexibleHeightElement, where the flex size sets it's height to 400px, after the fixedHeight element took 100px.
There are 2 options to use customScroll with this structure:
<someParent style="display: flex; height: 500px;">
<fixedHeightElement style="height: 100px"><fixedHeightElement/>
<flexibleHeightElement style="flex:1; min-height: 0; min-width: 0">
<CustomScroll heightRelativeToParent="100%">
your content (with enough height to cause a scroll)
<CustomScroll/>
<flexibleHeightElement/>
</someParent>
min-height and min-width are required since flex won't shrink below it's minimum content size (flex box spec).
<someParent style="display: flex; height: 500px;">
<fixedHeightElement style="height: 100px"><fixedHeightElement/>
<CustomScroll flex="1">
your content (with enough height to cause a scroll)
<CustomScroll/>
</someParent>
This project is built using Vite. To run in dev mode - "yarn dev" or "npm run dev". To build the project - "yarn build" or "npm run build".
npm install
npm test
# Or for continuous run
npx karma start
FAQs
[![NPM version][npm-image]][npm-url] ![](https://github.com/rommguy/react-custom-scroll/workflows/build/badge.svg) ![](https://img.shields.io/npm/dw/react-custom-scroll)
The npm package react-custom-scroll receives a total of 16,861 weekly downloads. As such, react-custom-scroll popularity was classified as popular.
We found that react-custom-scroll demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.