https://github.com/afeiship/react-scroll-pin
A compact React component designed to handle dynamic content, while securing a scroll position at the bottom.
https://github.com/afeiship/react-scroll-pin
message msg pin react scroll scroller scrollintoview
Last synced: about 2 months ago
JSON representation
A compact React component designed to handle dynamic content, while securing a scroll position at the bottom.
- Host: GitHub
- URL: https://github.com/afeiship/react-scroll-pin
- Owner: afeiship
- Created: 2018-06-01T07:41:18.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2024-12-07T08:36:46.000Z (5 months ago)
- Last Synced: 2025-02-07T10:46:04.107Z (3 months ago)
- Topics: message, msg, pin, react, scroll, scroller, scrollintoview
- Language: TypeScript
- Homepage:
- Size: 273 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-scroll-pin
> A compact React component designed to handle dynamic content, while securing a scroll position at the bottom.
[![version][version-image]][version-url]
[![license][license-image]][license-url]
[![size][size-image]][size-url]
[![download][download-image]][download-url]
## installation
```shell
npm install -S @jswork/react-scroll-pin
```
## usage
1. import css
```scss
@import "~@jswork/react-scroll-pin/dist/style.css";
// or use sass
@import "~@jswork/react-scroll-pin/dist/style.scss";
```
2. import js
```js
import ReactScrollPin from '@jswork/react-scroll-pin';
import '@jswork/react-scroll-pin/dist/style.scss';
import React, { useEffect } from 'react';
import RcList from '@jswork/react-list';
let initMessages = [
'I wondered why the baseball was getting bigger. Then it hit me.',
'Police were called to a day care, where a three-year-old was resisting a rest.',
'Did you hear about the guy whose whole left side was cut off? He’s all right now.',
'The roundest knight at King Arthur’s round table was Sir Cumference.',
'To write with a broken pencil is pointless.',
'When fish are in schools they sometimes take debate.',
'The short fortune teller who escaped from prison was a small medium at large.',
'A thief who stole a calendar… got twelve months.',
'A thief fell and broke his leg in wet cement. He became a hardened criminal.',
'Thieves who steal corn from a garden could be charged with stalking.',
'When the smog lifts in Los Angeles , U. C. L. A.',
'The math professor went crazy with the blackboard. He did a number on it.',
'The professor discovered that his theory of earthquakes was on shaky ground.',
'The dead batteries were given out free of charge.',
'If you take a laptop computer for a run you could jog your memory.',
'A dentist and a manicurist fought tooth and nail.',
'A bicycle can’t stand alone; it is two tired.',
'A will is a dead giveaway.',
'Time flies like an arrow; fruit flies like a banana.',
'A backward poet writes inverse.',
'In a democracy it’s your vote that counts; in feudalism, it’s your Count that votes.',
'A chicken crossing the road: poultry in motion.',
'If you don’t pay your exorcist you can get repossessed.',
'With her marriage she got a new name and a dress.',
'Show me a piano falling down a mine shaft and I’ll show you A-flat miner.',
'When a clock is hungry it goes back four seconds.',
'The guy who fell onto an upholstery machine was fully recovered.',
'A grenade fell onto a kitchen floor in France and resulted in Linoleum Blownapart.',
'You are stuck with your debt if you can’t budge it.',
'Local Area Network in Australia : The LAN down under.',
'He broke into song because he couldn’t find the key.',
'A calendar’s days are numbered.'
];
function App() {
const [messages, setMessages] = React.useState(initMessages);
// let counter = 0;
const counter = React.useRef(0);
const handleItem = ({ item, index }) => {
return (
{item}
);
};
useEffect(() => {
const interval = setInterval(() => {
const newMsg = `New message ${counter.current++}`;
const _messages = [...messages, newMsg];
console.log('current msg: ', newMsg);
setMessages([..._messages]);
}, 1000);
return () => clearInterval(interval);
}, [messages]);
return (
Build Time: {BUILD_TIME}
);
}
export default App;
```
## preview
- https://afeiship.github.io/react-scroll-pin/
## license
Code released under [the MIT license](https://github.com/afeiship/react-scroll-pin/blob/master/LICENSE.txt).
[version-image]: https://img.shields.io/npm/v/@jswork/react-scroll-pin
[version-url]: https://npmjs.org/package/@jswork/react-scroll-pin
[license-image]: https://img.shields.io/npm/l/@jswork/react-scroll-pin
[license-url]: https://github.com/afeiship/react-scroll-pin/blob/master/LICENSE.txt
[size-image]: https://img.shields.io/bundlephobia/minzip/@jswork/react-scroll-pin
[size-url]: https://github.com/afeiship/react-scroll-pin/blob/master/dist/react-scroll-pin.min.js
[download-image]: https://img.shields.io/npm/dm/@jswork/react-scroll-pin
[download-url]: https://www.npmjs.com/package/@jswork/react-scroll-pin