Skip to content

Commit

Permalink
+1 for prev commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@toviszsolt
toviszsolt committed Mar 28, 2024
1 parent ce01bd7 commit 8ac91de
Showing 1 changed file with 22 additions and 22 deletions.
44 changes: 22 additions & 22 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,36 +111,36 @@ how `ScrollSpy` works.
## Configuration

### Available `ScrollSpy` component properties

| Prop | Type | Default | Description |
| ----------- | --------------------------------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| activeClass | `string` | empty string | Class name to be applied to the active link |
| activeAttr | `boolean` | `false` | If true, the active link will have an attribute `data-active` attached to it. |
| offsetTop | `number` | `0` | Offset from top the final scroll position in pixels. |
| offsetLeft | `number` | `0` | Offset from left the final scroll position in pixels. |
| behavior | `'smooth' \| 'instant' \| 'auto'` | `smooth` | Behavior of the scroll animation. See: [Element: scrollTo()](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo#options) |
| root | `HTMLElement \| null` | `null` | Root element to be observed. See: [IntersectionObserver: IntersectionObserver()](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options) |
| rootMargin | `string` | `0px` | Root margin for the intersection observer See: [IntersectionObserver: IntersectionObserver()](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options) observed. |
| threshold | `number \| number[]` | `[0, 0.25, 0.5, 0.75, 1]` | Thresholds for the intersection. Element to be observed. See: [IntersectionObserver: IntersectionObserver()](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options) observer. |
| onClickEach | `function` | `undefined` | Callback fired when an element is clicked. |

### Parameters for using the `onClickEach(event, handler, container)` function.

- `event`: The original Click Event.
- `handler`: The internal click handler function. This should be called at the end of the `onClickEach` function, as you
want the internal click handler to run.
- `container`: The target html element. Always try to find the scrollable parent of the linked element.
### Available `ScrollSpy` props

| Prop | Type | Default | Description |
| ----------- | ------------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| activeClass | string | '' | Class name to be applied to the active link |
| activeAttr | boolean | false | If true, the active link will have an attribute `data-active` attached to it. |
| offsetTop | number | 0 | Offset the final scroll position from top in pixels. |
| offsetLeft | number | 0 | Offset the final scroll position from left in pixels. |
| behavior | 'smooth' \| 'instant' \| 'auto' | 'smooth' | Behavior of the scroll animation. See: [Element: scrollTo()](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo#options) |
| root | HTMLElement \| null | null | Root element for the intersection observer. See: [IntersectionObserver: IntersectionObserver()](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options) |
| rootMargin | string | '0px' | Root margin for the intersection observer See: [IntersectionObserver: IntersectionObserver()](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options) observed. |
| threshold | number \| number[] | [0, 0.25, 0.5, 0.75, 1] | Thresholds for the intersection. Element to be observed. See: [IntersectionObserver: IntersectionObserver()](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options) observer. |
| onClickEach | function | undefined | Callback function for handle the click event |

### Parameters for using the `onClickEach(event, internalClickHandler, container)` function.

- `event`: The original click event
- `internalClickHandler`: The internal function that scrolls to the element. This should be called at the end of the
`onClickEach` function, as you want the internal click handler to run.
- `container`: Container element that is being scrolled. Always try to find the scrollable parent of the linked element.

Example:

```jsx
const Comp = () => {
const onClickEach = (e, handler, container) => {
const onClickEach = (e, next, container) => {
console.log('The clicked element:', e.target);
console.log('The container element of target:', container);
// You can do something here if you want.
handler();
next();
};

return <ScrollSpy onClickEach={onClickEach}>...</ScrollSpy>;
Expand Down

0 comments on commit 8ac91de

Please sign in to comment.