@qtpy/use-ref-map 0.0.0 → 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
Пример использования `useRefMap` с `map` для создания ссылок на элементы и обработки события прокрутки:
|
|
30
30
|
|
|
31
31
|
```jsx
|
|
32
|
-
import
|
|
32
|
+
import useRefMap from '@qtpy/use-ref-map';
|
|
33
|
+
import useEvent from '@qtpy/use-event'; //хук для обработки событий
|
|
33
34
|
import { useState } from 'react';
|
|
34
|
-
import { useEvent } from './useEvent'; // Предполагаемый хук для обработки событий
|
|
35
35
|
|
|
36
36
|
function ProjectsPage() {
|
|
37
37
|
const { getRef } = useRefMap<HTMLDivElement>();
|
|
@@ -70,6 +70,7 @@ function ProjectsPage() {
|
|
|
70
70
|
);
|
|
71
71
|
}
|
|
72
72
|
```
|
|
73
|
+
Ссылка на hook [**useEvent**](https://www.npmjs.com/package/@qtpy/use-event)
|
|
73
74
|
|
|
74
75
|
В этом примере хук `useRefMap` используется для создания ссылок на элементы `<div>` с помощью метода `map` и ключей вида `project_${index}`. При прокрутке страницы хук `useEvent` проверяет положение каждого элемента через `getBoundingClientRect` и обновляет `activeIndex`, если элемент выходит за верхнюю границу окна, подсвечивая активный проект.
|
|
75
76
|
|
|
@@ -78,7 +79,7 @@ function ProjectsPage() {
|
|
|
78
79
|
Пример императивного вызова метода компонента через `useRefMap`:
|
|
79
80
|
|
|
80
81
|
```jsx
|
|
81
|
-
import
|
|
82
|
+
import useRefMap from '@qtpy/use-ref-map';
|
|
82
83
|
|
|
83
84
|
interface AnimatedLabelComponent {
|
|
84
85
|
setIsActive: (value: boolean) => void;
|
|
@@ -107,7 +108,7 @@ function AccordionCard({ keyName, title }: { keyName: string; title: string }) {
|
|
|
107
108
|
Удаление ненужной ссылки из хранилища:
|
|
108
109
|
|
|
109
110
|
```jsx
|
|
110
|
-
import
|
|
111
|
+
import useRefMap from '@qtpy/use-ref-map';
|
|
111
112
|
|
|
112
113
|
function Component() {
|
|
113
114
|
const { getRef, deleteRef } = useRefMap<HTMLElement>();
|
|
@@ -131,7 +132,7 @@ function Component() {
|
|
|
131
132
|
Получение списка всех ключей для проверки существующих ссылок:
|
|
132
133
|
|
|
133
134
|
```jsx
|
|
134
|
-
import
|
|
135
|
+
import useRefMap from '@qtpy/use-ref-map';
|
|
135
136
|
|
|
136
137
|
function Component() {
|
|
137
138
|
const { getRef, getAllKeys } = useRefMap<HTMLElement>();
|