All Projects → andrelmlins → react-shadow-scroll

andrelmlins / react-shadow-scroll

Licence: MIT license
Component that customizes the list and inserts shadow when scrolling exists

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to react-shadow-scroll

React Scroll Shadow
Pure CSS shadow to indicate more content in scrollable area
Stars: ✭ 229 (+717.86%)
Mutual labels:  scroll, shadow
RollingNotice-Swift
滚动公告、广告,支持灵活自定义cell。淘宝、口碑、京东、美团、天猫等等一切滚动广告 Roll Notice or Advertising, customize cell as UITableViewCell supported, Swift version is also ready
Stars: ✭ 109 (+289.29%)
Mutual labels:  scroll
V Bar
The virtual responsive crossbrowser scrollbar component for VueJS 2x
Stars: ✭ 216 (+671.43%)
Mutual labels:  scroll
Moveto
A lightweight scroll animation javascript library without any dependency
Stars: ✭ 2,746 (+9707.14%)
Mutual labels:  scroll
React Native Swiper Flatlist
👆 Swiper component implemented with FlatList using Hooks & Typescript + strict automation tests with Detox
Stars: ✭ 217 (+675%)
Mutual labels:  scroll
get-css-data
A micro-library for collecting stylesheet data from link and style nodes
Stars: ✭ 29 (+3.57%)
Mutual labels:  shadow
Scroll
Static publishing software with a newspaper feel built on Tree Notation. Scroll is public domain software.
Stars: ✭ 206 (+635.71%)
Mutual labels:  scroll
android-multibackground
This library can easily apply round corner、stroke、shadow and different state effects to background drawable.
Stars: ✭ 18 (-35.71%)
Mutual labels:  shadow
MacOSX-VFS-redirector
Mac OS X file system filter to redirect file operations
Stars: ✭ 38 (+35.71%)
Mutual labels:  shadow
React Scroll Sync
Synced scroll position across multiple scrollable elements
Stars: ✭ 252 (+800%)
Mutual labels:  scroll
Vue Scroll
Scroll directive on vue
Stars: ✭ 238 (+750%)
Mutual labels:  scroll
React World
✨🌌 A different web experience in 8 bit React.js World
Stars: ✭ 230 (+721.43%)
Mutual labels:  scroll
QuickTraceiOSLogger
A real time iOS log trace tool, view iOS log with pc web browser under local area network, which will automatically scroll like xcode. 一个实时的iOS日志跟踪工具,在局域网中使用 PC Web 浏览器查看 iOS 日志,它将像xcode一样自动滚动。
Stars: ✭ 16 (-42.86%)
Mutual labels:  scroll
React Native Stretchy
🤸‍♀️A ReactNative scrollable stretchy header component
Stars: ✭ 216 (+671.43%)
Mutual labels:  scroll
DC-ShadowNet-Hard-and-Soft-Shadow-Removal
[ICCV2021]DC-ShadowNet: Single-Image Hard and Soft Shadow Removal Using Unsupervised Domain-Classifier Guided Network, https://arxiv.org/abs/2207.10434
Stars: ✭ 81 (+189.29%)
Mutual labels:  shadow
React Native Text Ticker
React Native Text Ticker/Marquee Component
Stars: ✭ 212 (+657.14%)
Mutual labels:  scroll
react-is-scrolling
Simply detect if users are scrolling in your components in a declarative API
Stars: ✭ 17 (-39.29%)
Mutual labels:  scroll
react-auto-scroll
Automatically scroll an element to the bottom
Stars: ✭ 28 (+0%)
Mutual labels:  scroll
JhScrollActionSheetView
JhScrollActionSheetView - UIcollectionView横向滚动,类似微博新版的详情页分享界面,可设置单排或双排显示,title不设置不显示title,如果想实现发送站内用户的功能,自己可以改一下代码
Stars: ✭ 13 (-53.57%)
Mutual labels:  scroll
scrollRulerView
请使用 CYRuler (Please use CYRuler)
Stars: ✭ 31 (+10.71%)
Mutual labels:  scroll

React Shadow Scroll

npm versionLicense: MITNode.js CINetlify StatusLanguage grade: JavaScript

Component that customizes the list and inserts shadow when scrolling exists

Installation

npm i react-shadow-scroll
// OR
yarn add react-shadow-scroll

Demo Link

Local demo:

git clone https://github.com/andrelmlins/react-shadow-scroll.git
cd react-shadow-scroll
npm install && npm run start

Examples

import React from 'react';
import { render } from 'react-dom';
import ReactShadowScroll from 'react-shadow-scroll';

const App = () => (
  <ReactShadowScroll>
    <ul>
      <li>Teste</li>
      <li>Teste</li>
      <li>Teste</li>
      <li>Teste</li>
    </ul>
  </ReactShadowScroll>
);

render(<App />, document.getElementById('root'));

Properties

Raw component props (before transform):

Prop Default Type Description
scrollColor #c5c5c5 string Scroll color
scrollColorHover #a6a6a6 string Scroll color when hover
scrollWidth 5 number Scroll Width
scrollPadding 0 number Left scroll padding
isShadow true boolean View shadow
shadow '0 2px 4px rgba(0, 0, 0, 0.2) inset, 0 -2px 4px rgba(0, 0, 0, 0.2) inset' string Shadow
styleSubcontainer null object Style in Subcontainer

NPM Statistics

Download stats for this NPM package

NPM

License

React Shadow Scroll is open source software licensed as MIT.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].