Skip to content
This repository was archived by the owner on May 1, 2025. It is now read-only.

Commit 3aba71f

Browse files
YashTotaleYashTotale
committed
ReusedProps seperate from Components
1 parent 6131362 commit 3aba71f

File tree

7 files changed

+123
-80
lines changed

7 files changed

+123
-80
lines changed

‎.vscode/settings.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,7 @@
99
".eslintrc": "json",
1010
".firebaserc": "json"
1111
},
12+
"markdown.extension.toc.updateOnSave": true,
13+
"markdown.extension.toc.slugifyMode": "github",
1214
"typescript.tsdk": "node_modules/typescript/lib"
1315
}

‎README.md‎

Lines changed: 60 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,6 @@ _Table Of Contents_
1919
- [Why this one](#why-this-one)
2020
- [Website](#website)
2121
- [Components](#components)
22-
- [Reused Props](#reused-props)
23-
- [behavior](#behavior)
24-
- [position](#position)
25-
- [requiredPathname](#requiredpathname)
26-
- [scrollFunc](#scrollfunc)
2722
- [HashScroll](#hashscroll)
2823
- [Summary](#summary)
2924
- [Demo](#demo)
@@ -45,6 +40,11 @@ _Table Of Contents_
4540
- [Demo](#demo-3)
4641
- [Params](#params)
4742
- [Example](#example-3)
43+
- [Reused Props](#reused-props)
44+
- [behavir](#behavir)
45+
- [position](#position)
46+
- [requiredPathname](#requiredpathname)
47+
- [scrollFunc](#scrollfunc)
4848
- [Contributing](#contributing)
4949
- [More Info (Badges)](#more-info-badges)
5050

@@ -104,49 +104,6 @@ The [website](https://react-hash-scroll.web.app/) compiles all the information a
104104

105105
**Note**: [react-router-dom](https://reactrouter.com/web/) is required as a peer dependency and all components must be wrapped in a [Router](https://reactrouter.com/web/api/BrowserRouter)
106106

107-
### Reused Props
108-
109-
Props that are used by multiple components
110-
111-
#### behavior
112-
113-
- The behavior of the scroll
114-
- Note: not all browsers have implemented options for [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) (which is what React Hash Scroll uses internally) - see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) and [Can I Use](https://caniuse.com/scrollintoview) - there is also a [browser polyfill](https://github.com/iamdustan/smoothscroll) for smooth scrolling which you can install separately so smooth scrolling will work in all browsers
115-
- Type:
116-
- "smooth": Smooth scroll (_Default_)
117-
- "auto": Instant scroll
118-
119-
#### position
120-
121-
- The position of the element on the page after it is scrolled to
122-
- Like [behavior](#behavior), some browsers don't support [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) options yet, so this property may not work on all browsers.
123-
- Type:
124-
- "center": Element will scroll to center of page (_Default_)
125-
- "end": Element will scroll to bottom of page
126-
- "start": Element will scroll to top of page
127-
- "nearest": Element will scroll to center/end/start depending on which one is closest
128-
129-
#### requiredPathname
130-
131-
- Only scroll on a specific pathname(s)
132-
- Note: "/" matches to the website name with no pathname
133-
- **Don't** end pathnames with "/" (Ex. "/test/")
134-
- For example, to only scroll on:
135-
- **/home/contact**: "/home/contact"
136-
- **/docs** or **/features**: ["/docs", "/features"]
137-
- Type: `string | string[]`
138-
139-
#### scrollFunc
140-
141-
- A custom scroll function that overrides the default [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) function used by React Hash Scroll
142-
- Parameters:
143-
- ref: The ref object that contains the target element
144-
- [behavior](#behavior): The defined scroll behavior for the element or the default behavior
145-
- [position](#position): The defined scroll position for the element or the default position
146-
- Type: `(ref,`[`behavior`](#behavior)`,`[`position`](#position)`) => void`
147-
148-
---
149-
150107
### HashScroll
151108

152109
#### Summary
@@ -162,9 +119,9 @@ Scrolls to child element when the specified hash is present in the url
162119
`hash`
163120

164121
- **Required**
165-
- Type: `string`
166122
- The [hash](<https://www.oho.com/blog/explained-60-seconds-hash-symbols-urls-and-seo#:~:text=A%20hash%20sign%20(%23)%20in,specific%20subsection%20of%20that%20document.>) that should trigger scroll to the element
167123
- Can include or exclude leading "#"
124+
- Type: `string`
168125
- Examples:
169126
- "#example"
170127
- "example"
@@ -180,9 +137,9 @@ Scrolls to child element when the specified hash is present in the url
180137
`children`
181138

182139
- **Required**
183-
- Type: `ReactElement`
184140
- Must be a singular child (which **CANNOT** be text)
185141
- Custom children must forward refs to a dom element
142+
- Type: `ReactElement`
186143

187144
#### Example
188145

@@ -347,14 +304,65 @@ const App = () => {
347304

348305
Creates a ref that scrolls to its assigned element when a specified hash is present in the url
349306

350-
#### Demo
351-
352307
#### Params
353308

309+
`hash`
310+
311+
- **Required**
312+
- Type: `string`
313+
- The hash that should trigger scroll
314+
315+
`options`
316+
317+
-
318+
354319
#### Example
355320

356321
---
357322

323+
## Reused Props
324+
325+
Props that are used by multiple components
326+
327+
### behavior
328+
329+
- The behavior of the scroll
330+
- Note: not all browsers have implemented options for [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) (which is what React Hash Scroll uses internally) - see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) and [Can I Use](https://caniuse.com/scrollintoview) - there is also a [browser polyfill](https://github.com/iamdustan/smoothscroll) for smooth scrolling which you can install separately so smooth scrolling will work in all browsers
331+
- Type:
332+
- "smooth": Smooth scroll (_Default_)
333+
- "auto": Instant scroll
334+
335+
### position
336+
337+
- The position of the element on the page after it is scrolled to
338+
- Like [behavior](#behavior), some browsers don't support [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) options yet, so this property may not work on all browsers.
339+
- Type:
340+
- "center": Element will scroll to center of page (_Default_)
341+
- "end": Element will scroll to bottom of page
342+
- "start": Element will scroll to top of page
343+
- "nearest": Element will scroll to center/end/start depending on which one is closest
344+
345+
### requiredPathname
346+
347+
- Only scroll on a specific pathname(s)
348+
- Note: "/" matches to the website name with no pathname
349+
- **Don't** end pathnames with "/" (Ex. "/test/")
350+
- For example, to only scroll on:
351+
- **/home/contact**: "/home/contact"
352+
- **/docs** or **/features**: ["/docs", "/features"]
353+
- Type: `string | string[]`
354+
355+
### scrollFunc
356+
357+
- A custom scroll function that overrides the default [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) function used by React Hash Scroll
358+
- Parameters:
359+
- ref: The ref object that contains the target element
360+
- [behavior](#behavior): The defined scroll behavior for the element or the default behavior
361+
- [position](#position): The defined scroll position for the element or the default position
362+
- Type: `(ref,`[`behavior`](#behavior)`,`[`position`](#position)`) => void`
363+
364+
---
365+
358366
## Contributing
359367

360368
- Go to the [github repository](https://github.com/YashTotale/react-hash-scroll)

‎docs/Components/HashScroll.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ Scrolls to child element when the specified hash is present in the url
1313
`hash`
1414

1515
- **Required**
16-
- Type: `string`
1716
- The [hash](<https://www.oho.com/blog/explained-60-seconds-hash-symbols-urls-and-seo#:~:text=A%20hash%20sign%20(%23)%20in,specific%20subsection%20of%20that%20document.>) that should trigger scroll to the element
1817
- Can include or exclude leading "#"
18+
- Type: `string`
1919
- Examples:
2020
- "#example"
2121
- "example"
@@ -31,9 +31,9 @@ Scrolls to child element when the specified hash is present in the url
3131
`children`
3232

3333
- **Required**
34-
- Type: `ReactElement`
3534
- Must be a singular child (which **CANNOT** be text)
3635
- Custom children must forward refs to a dom element
36+
- Type: `ReactElement`
3737

3838
#### Example
3939

‎docs/Hooks/useHashScroll.md‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,16 @@
44

55
Creates a ref that scrolls to its assigned element when a specified hash is present in the url
66

7-
#### Demo
8-
97
#### Params
108

9+
`hash`
10+
11+
- **Required**
12+
- Type: `string`
13+
- The hash that should trigger scroll
14+
15+
`options`
16+
17+
-
18+
1119
#### Example

docs/Components/ReusedProps.md renamed to docs/ReusedProps.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
### Reused Props
1+
## Reused Props
22

33
Props that are used by multiple components
44

5-
#### behavior
5+
### behavior
66

77
- The behavior of the scroll
88
- Note: not all browsers have implemented options for [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) (which is what React Hash Scroll uses internally) - see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) and [Can I Use](https://caniuse.com/scrollintoview) - there is also a [browser polyfill](https://github.com/iamdustan/smoothscroll) for smooth scrolling which you can install separately so smooth scrolling will work in all browsers
99
- Type:
1010
- "smooth": Smooth scroll (_Default_)
1111
- "auto": Instant scroll
1212

13-
#### position
13+
### position
1414

1515
- The position of the element on the page after it is scrolled to
1616
- Like [behavior](#behavior), some browsers don't support [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) options yet, so this property may not work on all browsers.
@@ -20,7 +20,7 @@ Props that are used by multiple components
2020
- "start": Element will scroll to top of page
2121
- "nearest": Element will scroll to center/end/start depending on which one is closest
2222

23-
#### requiredPathname
23+
### requiredPathname
2424

2525
- Only scroll on a specific pathname(s)
2626
- Note: "/" matches to the website name with no pathname
@@ -30,7 +30,7 @@ Props that are used by multiple components
3030
- **/docs** or **/features**: ["/docs", "/features"]
3131
- Type: `string | string[]`
3232

33-
#### scrollFunc
33+
### scrollFunc
3434

3535
- A custom scroll function that overrides the default [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) function used by React Hash Scroll
3636
- Parameters:

‎scripts/postcommit.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const postcommit = async () => {
2525

2626
const wikiPath = join(ROOT_DIR, "wiki");
2727

28-
rootGit.clone(
28+
await rootGit.clone(
2929
"https://github.com/YashTotale/react-hash-scroll.wiki.git",
3030
wikiPath
3131
);

‎scripts/precommit.ts‎

Lines changed: 43 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -159,39 +159,64 @@ const checkReadme = async () => {
159159
const docsPath = "docs/";
160160

161161
if (staged.includes(docsPath)) {
162-
const createReadme = async (name: string) => {
163-
const path = docsPath + name + "/";
162+
const buildReadme = async (name: string, isFile?: boolean) => {
163+
const path = docsPath + name;
164164

165165
if (staged.includes(path)) {
166-
const dir = join(docsDir, name);
166+
const buildFile = async (
167+
file: string,
168+
dir: string,
169+
hashCount = 3
170+
) => {
171+
const readme = await getReadme();
167172

168-
const files = await readDir(dir);
173+
const hashes = "#".repeat(hashCount);
169174

170-
for (const file of files) {
171-
if (staged.includes(`${path}${file}`)) {
172-
const readme = await getReadme();
175+
let titleIndex = readme.indexOf(`${hashes} ${parse(file).name}`);
173176

174-
const titleIndex = readme.indexOf(`### ${parse(file).name}`);
177+
if (titleIndex < 0)
178+
titleIndex = readme.indexOf(
179+
`${hashes} ${parse(file)
180+
.name.match(/[A-Z][a-z]+|[0-9]+/g)
181+
?.join(" ")}`
182+
);
175183

176-
const endIndex = readme.indexOf("---", titleIndex);
184+
const endIndex = readme.indexOf("---", titleIndex);
177185

178-
const fileContents = await readFile(join(dir, file), "utf-8");
186+
const fileContents = await readFile(join(dir, file), "utf-8");
179187

180-
const newReadme =
181-
readme.substring(0, titleIndex) +
182-
fileContents +
183-
"\n" +
184-
readme.substring(endIndex);
188+
const newReadme =
189+
readme.substring(0, titleIndex) +
190+
fileContents +
191+
"\n" +
192+
readme.substring(endIndex);
185193

186-
await writeFile(readmeDest, newReadme);
194+
await writeFile(readmeDest, newReadme);
195+
};
196+
197+
if (isFile) {
198+
if (staged.includes(path)) {
199+
await buildFile(name, docsDir, 2);
200+
}
201+
} else {
202+
const dir = join(docsDir, name);
203+
204+
const files = await readDir(dir);
205+
206+
for (const file of files) {
207+
if (staged.includes(`${path}/${file}`)) {
208+
await buildFile(file, dir);
209+
}
187210
}
188211
}
189212
}
190213
};
191214

192-
await createReadme("Components");
215+
await buildReadme("Components");
216+
217+
await buildReadme("Hooks");
193218

194-
await createReadme("Hooks");
219+
await buildReadme("ReusedProps.md", true);
195220

196221
await gitAdd(readmeDest);
197222
}

0 commit comments

Comments
 (0)