Skip to content

Commit d1bb223

Browse files
skitschaskitscha
authored
build: Update CI script
* fix: addressing mr comments and updating ci yml * docs: updating example in readme to be functional component * docs: adding descriptions to component properties to improve documentation BREAKING CHANGE: Types are now exported by this package.
1 parent 501ce1a commit d1bb223

File tree

8 files changed

+1393
-2499
lines changed

8 files changed

+1393
-2499
lines changed

‎.github/workflows/release.yml‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
name: Release
32

43
on: [push]
@@ -9,15 +8,15 @@ jobs:
98
runs-on: ubuntu-latest
109
steps:
1110
- name: Checkout
12-
uses: actions/checkout@v1
11+
uses: actions/checkout@v4
1312
- name: Setup Node.js
14-
uses: actions/setup-node@v1
13+
uses: actions/setup-node@v4
1514
with:
1615
node-version: 22
1716
- name: Install dependencies
1817
run: npm ci
1918
- name: Release
20-
uses: codfish/semantic-release-action@v1
19+
uses: cycjimmy/semantic-release-action@v4
2120
env:
2221
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
2322
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

‎.lintstagedrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"*": "eslint --fix"
3+
}

‎README.md‎

Lines changed: 51 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
# react-scroll-sync
2+
23
Synced scroll position across multiple scrollable elements
34

45
## Demo
@@ -18,54 +19,60 @@ MIT
1819
```bash
1920
npm install --save react-scroll-sync
2021
```
22+
2123
## Usage
2224

2325
```jsx
24-
import React, {Component} from 'react';
25-
import { ScrollSync, ScrollSyncPane } from 'react-scroll-sync';
26+
import { FC } from "react";
27+
import { ScrollSync, ScrollSyncPane } from "react-scroll-sync";
2628

27-
export default class MyComponent extends Component {
28-
29-
render() {
30-
<ScrollSync>
31-
<div style={{ display: 'flex', position: 'relative', height: 300 }}>
32-
<ScrollSyncPane>
33-
<div style={{overflow: 'auto'}}>
34-
<section style={{ height: 500 }}>
35-
<h1>Left Pane Content</h1>
36-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
37-
dolorum
38-
est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
39-
possimus quasi rerum sed soluta veritatis.</p>
40-
</section>
41-
</div>
42-
</ScrollSyncPane>
29+
export const MyComponent: FC = () => {
30+
return (
31+
<ScrollSync>
32+
<div style={{ display: "flex", position: "relative", height: 300 }}>
33+
<ScrollSyncPane>
34+
<div style={{ overflow: "auto" }}>
35+
<section style={{ height: 500 }}>
36+
<h1>Left Pane Content</h1>
37+
<p>
38+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab
39+
aperiam doloribus dolorum est eum eveniet exercitationem iste
40+
labore minus, neque nobis odit officiis omnis possimus quasi
41+
rerum sed soluta veritatis.
42+
</p>
43+
</section>
44+
</div>
45+
</ScrollSyncPane>
4346

44-
<ScrollSyncPane>
45-
<div style={{overflow: 'auto'}}>
46-
<section style={{ height: 1000 }}>
47-
<h1>Middle Pane Content</h1>
48-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
49-
dolorum
50-
est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
51-
possimus quasi rerum sed soluta veritatis.</p>
52-
</section>
53-
</div>
54-
</ScrollSyncPane>
47+
<ScrollSyncPane>
48+
<div style={{ overflow: "auto" }}>
49+
<section style={{ height: 1000 }}>
50+
<h1>Middle Pane Content</h1>
51+
<p>
52+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab
53+
aperiam doloribus dolorum est eum eveniet exercitationem iste
54+
labore minus, neque nobis odit officiis omnis possimus quasi
55+
rerum sed soluta veritatis.
56+
</p>
57+
</section>
58+
</div>
59+
</ScrollSyncPane>
5560

56-
<ScrollSyncPane>
57-
<div style={{overflow: 'auto'}}>
58-
<section style={{ height: 2000 }}>
59-
<h1>Right Pane Content</h1>
60-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
61-
dolorum
62-
est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
63-
possimus quasi rerum sed soluta veritatis.</p>
64-
</section>
65-
</div>
66-
</ScrollSyncPane>
67-
</div>
68-
</ScrollSync>
69-
}
70-
}
61+
<ScrollSyncPane>
62+
<div style={{ overflow: "auto" }}>
63+
<section style={{ height: 2000 }}>
64+
<h1>Right Pane Content</h1>
65+
<p>
66+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab
67+
aperiam doloribus dolorum est eum eveniet exercitationem iste
68+
labore minus, neque nobis odit officiis omnis possimus quasi
69+
rerum sed soluta veritatis.
70+
</p>
71+
</section>
72+
</div>
73+
</ScrollSyncPane>
74+
</div>
75+
</ScrollSync>
76+
);
77+
};
7178
```

‎lint-staged.config.mjs‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

0 commit comments

Comments
 (0)