docs: update hooks description (#89)

vintach · May 10, 2024 · fed0bfb · fed0bfb
1 parent 7c480a5
commit fed0bfb
Show file tree

Hide file tree

Showing 25 changed files with 35 additions and 123 deletions.
diff --git a/docs/_config.json b/docs/_config.json
@@ -2,6 +2,7 @@
   "sidebar": [
     {
       "title": "DOM",
+      "heading": true,
       "children": [
         {
           "title": "useKeyboard",
@@ -31,6 +32,7 @@
     },
     {
       "title": "State",
+      "heading": true,
       "children": [
         {
           "title": "useCounter",
@@ -44,6 +46,7 @@
     },
     {
       "title": "Lifecycle",
+      "heading": true,
       "children": [
         {
           "title": "useTimeout",
@@ -57,6 +60,7 @@
     },
     {
       "title": "Utilities",
+      "heading": true,
       "children": [
         {
           "title": "useScrollSpy",

diff --git a/docs/en/use-click-outside.mdx b/docs/en/use-click-outside.mdx
@@ -1,12 +1,8 @@
 ---
 title: useClickOutside
-description: The useClickOutside hook detect clicks outside of specific component.
+description: Detects click and touch events outside from a specific element.
 ---
 
-# useClickOutside
-
-The `useClickOutside` hook detect clicks outside of specific component.
-
 ## Installation
 
 Install the custom hook from your command line.

diff --git a/docs/en/use-count-down.mdx b/docs/en/use-count-down.mdx
@@ -1,13 +1,12 @@
 ---
 title: useCountDown
-description: The `useCountDown` hook takes care of handling a countdown timer for you.
+description: Manage a countdown with options to start, stop and reset.
 ---
 
-# useCountDown
+## Features
 
-The `useCountDown` hook takes care of handling a countdown timer for you.
-
-You can render its current value into the DOM as it refreshes, and manipulate its behavior as you wish (like specifying an _onFinished_ callback).
+- Execute a function when the timer has expired.
+- Start the countdown immediately or manually.
 
 ## Installation
 

diff --git a/docs/en/use-counter.mdx b/docs/en/use-counter.mdx
@@ -1,12 +1,8 @@
 ---
 title: useCounter
-description: The useCounter hook allows you to manage a counter.
+description: Manage a counter with increment/decrement functions.
 ---
 
-# useCounter
-
-The `useCounter` hook allows you to manage a counter.
-
 ## Features
 
 - Reset the counter to the initial value.

diff --git a/docs/en/use-event-listener.mdx b/docs/en/use-event-listener.mdx
@@ -1,12 +1,8 @@
 ---
 title: useEventListener
-description: A hook that enables you to add event listeners to a target element or document.
+description: Add event listeners to a target item or document.
 ---
 
-# useEventListener
-
-The `useEventListener` hook allows you to add event listeners to a DOM element using a declarative syntax.
-
 ## Features
 
 - Automatically removes the event listener when the component unmounts.

diff --git a/docs/en/use-interval.mdx b/docs/en/use-interval.mdx
@@ -1,12 +1,8 @@
 ---
 title: useInterval
-description: The useInterval hook is used to create an interval that executes a function every specified number of milliseconds.
+description: Execute a callback function at specific time intervals.
 ---
 
-# useInterval
-
-The `useInterval` hook is used to create an interval that executes a function every specified number of milliseconds. It is similar to the `setInterval` function, but it is declarative and can be cancelled.
-
 ## Features
 
 - The interval is automatically cleared when the component is unmounted.

diff --git a/docs/en/use-keyboard.mdx b/docs/en/use-keyboard.mdx
@@ -1,12 +1,8 @@
 ---
 title: useKeyboard
-description: The useKeyboard hook handles keyboard interactions
+description: Allows listening and handling keyboard events.
 ---
 
-# useKeyboard
-
-The `useKeyboard` hook handles keyboard interactions
-
 ## Features
 
 - It supports key checking, using under the hood the `event.key` property and if you need to use other properties like `event.code` you can change it in the configuration using the `checker` option.

diff --git a/docs/en/use-media-query.mdx b/docs/en/use-media-query.mdx
@@ -1,13 +1,8 @@
 ---
 title: useMediaQuery
-description: Is a hook that is used to determine if the current screen size matches a given media query.
+description: Subscribe and respond to changes to CSS media queries.
 ---
 
-# useMediaQuery
-
-The `useMediaQuery` hook is used to determine if the current screen size matches a given media query.
-
-
 ## Installation
 
 <Snippet pkg text='@raddix/use-media-query' />

diff --git a/docs/en/use-scroll-position.mdx b/docs/en/use-scroll-position.mdx
@@ -1,13 +1,8 @@
 ---
 title: useScrollPosition
-description: A React hook that returns the current scroll position of the document or element.
-tags: react, effect, dom, hook
+description: Track the scroll position of the document or a specific element.
 ---
 
-# useScrollPosition
-
-The `useScrollPosition` hook returns the current scroll position of the document or element.
-
 ## Installation
 
 <Snippet pkg text='@raddix/use-scroll-position' />

diff --git a/docs/en/use-scroll-spy.mdx b/docs/en/use-scroll-spy.mdx
@@ -3,10 +3,6 @@ title: useScrollSpy
 description: Automatically update navigation based on scroll position.
 ---
 
-# useScrollSpy
-
-The `useScrollSpy` hook improves page navigation by automatically updating the active section based on the user's scroll position. It keeps track of the scroll position and synchronizes it with the corresponding navigation index.
-
 ## Installation
 
 Install the custom hook from your command line.

diff --git a/docs/en/use-timeout.mdx b/docs/en/use-timeout.mdx
@@ -1,13 +1,8 @@
 ---
 title: useTimeout
-description: Is a hook that used to execute a function after a specified amount of time.
+description: Execute a function after a specified amount of time.
 ---
 
-# useTimeout
-
-The `useTimeout` hook is used to execute a function after a specified amount of time.
-It is similar to the `setTimeout` function, but it is declarative.
-
 ## Features
 
 - The timeout is automatically cleared when the component unmounts.

diff --git a/docs/en/use-toggle.mdx b/docs/en/use-toggle.mdx
@@ -1,12 +1,8 @@
 ---
 title: useToggle
-description: The useToggle hook toggle a boolean value.
+description: A hook that toggles a boolean value.
 ---
 
-# useToggle
-
-The `useToggle` hook toggle a boolean value.
-
 ## Installation
 
 Install the custom hook from your command line.

diff --git a/docs/en/use-window-size.mdx b/docs/en/use-window-size.mdx
@@ -1,12 +1,8 @@
 ---
 title: useWindowSize
-description: A hook that keeps track of the dimensions of the browser window.
+description: Keeps track of the dimensions of the browser window.
 ---
 
-# useWindowSize
-
-The `useWindowSize` hook keeps track of the dimensions of the browser window.
-
 ## Installation
 
 <Snippet pkg text='@raddix/use-window-size' />

diff --git a/docs/es/use-click-outside.mdx b/docs/es/use-click-outside.mdx
@@ -1,11 +1,10 @@
 ---
 title: useClickOutside
-description: El hook useClickOutside detecta clics fuera de un componente específico.
+description: Detecta eventos de click y touch fuera de un elemento específico.
 ---
 
-# useClickOutside
-
-El hook `useClickOutside` detecta clics fuera de un componente específico.
+El hook `useClickOutside` es especialmente útil para escenarios como cerrar ventanas modales,
+menús desplegables y otros componentes cuando un usuario interactúa fuera de ellos.
 
 ## Instalación
 

diff --git a/docs/es/use-count-down.mdx b/docs/es/use-count-down.mdx
@@ -1,13 +1,12 @@
 ---
 title: useCountDown
-description: El hook `useCountDown` se encarga de manejar un temporizador de cuenta regresiva por ti.
+description: Gestiona una cuenta regresiva con opciones para iniciar, detener y restablecer.
 ---
 
-# useCountDown
+## Carácteristicas
 
-El hook `useCountDown` se encarga de manejar un temporizador de cuenta regresiva por ti.
-
-Puedes renderizar su valor actual en el DOM a medida que se refresca y manipular su comportamiento como desees (como especificar un callback _onFinished_ que se ejecute al terminar el contador).
+- Ejecuta una función cuando el temporizador a finalizado.
+- Inicia la cuenta regresiva inmediatamente o manualmente.
 
 ## Instalación
 

diff --git a/docs/es/use-counter.mdx b/docs/es/use-counter.mdx
@@ -1,12 +1,8 @@
 ---
 title: useCounter
-description: El hook useCounter le permite administrar un contador.
+description: Gestiona un contador con funciones para incrementar/decrementar.
 ---
 
-# useCounter
-
-El hook `useCounter` le permite administrar un contador.
-
 ## Carácteristicas
 
 - Reiniciar el contador al valor inicial.

diff --git a/docs/es/use-event-listener.mdx b/docs/es/use-event-listener.mdx
@@ -1,12 +1,8 @@
 ---
 title: useEventListener
-description: Un enlace que le permite agregar detectores de eventos a un elemento DOM utilizando una sintaxis declarativa.
+description: Agregar detectores de eventos a un elemento DOM o al documento.
 ---
 
-# useEventListener
-
-El hook `useEventListener` le permite agregar detectores de eventos a un elemento DOM utilizando una sintaxis declarativa.
-
 ## Características
 
 - Elimina automáticamente el event listener cuando el componente se desmonta.

diff --git a/docs/es/use-interval.mdx b/docs/es/use-interval.mdx
@@ -1,12 +1,8 @@
 ---
 title: useInterval
-description: El hook useInterval se usa para crear un intervalo que ejecuta una función cada número específico de milisegundos. Es similar a la función setInterval, pero es declarativa y se puede cancelar.
+description: Ejecute una función callback en intervalos de tiempo específicos.
 ---
 
-# useInterval
-
-El hook `useInterval` se usa para crear un intervalo que ejecuta una función cada número específico de milisegundos. Es similar a la función `setInterval`, pero es declarativa y se puede cancelar.
-
 ## Características
 
 - El intervalo se borra automáticamente cuando el componente se desmonta.

diff --git a/docs/es/use-keyboard.mdx b/docs/es/use-keyboard.mdx
@@ -1,12 +1,8 @@
 ---
 title: useKeyboard
-description: Es un custom hook que maneja las interacciones del teclado.
+description: Permite escuchar y manejar eventos de teclado.
 ---
 
-# useKeyboard
-
-El hook `useKeyboard` maneja las interacciones del teclado.
-
 ## Características
 
 - Soporta verificación de teclas, usando bajo el capó la propiedad `event.key` y si necesitas usar otras propiedades como `event.code` puede cambiarlo en la configuración mediante la opción `checker`.

diff --git a/docs/es/use-media-query.mdx b/docs/es/use-media-query.mdx
@@ -1,12 +1,8 @@
 ---
 title: useMediaQuery
-description: Es un hook que se utiliza para determinar si el tamaño de pantalla actual coincide con una consulta de medios determinada.
+description: Suscríbase y responda a los cambios en las consultas de medios CSS.
 ---
 
-# useMediaQuery
-
-El hook `useMediaQuery` se utiliza para determinar si el tamaño de pantalla actual coincide con una consulta de medios determinada.
-
 ## Instalación
 
 <Snippet pkg text='@raddix/use-media-query' />

diff --git a/docs/es/use-scroll-position.mdx b/docs/es/use-scroll-position.mdx
@@ -1,13 +1,8 @@
 ---
 title: useScrollPosition
-description: Un hook para obtener la posición de desplazamiento actual del documento o elemento.
-tags: react, effect, dom, hook
+description: Rastrear la posición de desplazamiento del documento o un elemento específico.
 ---
 
-# useScrollPosition
-
-El hook `useScrollPosition` devuelve la posición de desplazamiento actual del documento o elemento.
-
 ## Instalación
 
 <Snippet pkg text='@raddix/use-scroll-position' />

diff --git a/docs/es/use-scroll-spy.mdx b/docs/es/use-scroll-spy.mdx
@@ -1,12 +1,8 @@
 ---
 title: useScrollSpy
-description: Actualice automáticamente la navegación en función de la posición del usuario.
+description: Actualice automáticamente la navegación en función de la posición de desplazamiento.
 ---
 
-# useScrollSpy
-
-El hook `useScrollSpy` actualiza la sección activa de la pagina basándose en la posición del usuario, mejorando así la navegación de la página. Este hook monitoriza la posicion del usuario y lo sincroniza con el índice correspondiente.
-
 ## Instalación
 
 Instale el custom hook desde su terminal.

diff --git a/docs/es/use-timeout.mdx b/docs/es/use-timeout.mdx
@@ -1,13 +1,8 @@
 ---
 title: useTimeout
-description: Es un hook que se utiliza para ejecutar una función después de un período de tiempo específico.
+description: Ejecuta una función después de un período de tiempo específico.
 ---
 
-# useTimeout
-
-El hook `useTimeout` se utiliza para ejecutar una función después de un período de tiempo específico.
-Es similar a la función `setTimeout`, pero es declarativo.
-
 ## Características
 
 - El tiempo de espera se borra automáticamente cuando el componente se desmonta.

diff --git a/docs/es/use-toggle.mdx b/docs/es/use-toggle.mdx
@@ -1,12 +1,8 @@
 ---
 title: useToggle
-description: El hook useToggle alterna un valor booleano.
+description: Un hook que alterna un valor booleano.
 ---
 
-# useToggle
-
-El hook `useToggle` alterna un valor booleano.
-
 ## Instalación
 
 Instale el custom hook desde su terminal.

diff --git a/docs/es/use-window-size.mdx b/docs/es/use-window-size.mdx
@@ -1,12 +1,8 @@
 ---
 title: useWindowSize
-description: Un hook que rastrea el tamaño de la ventana del navegador.
+description: Realiza un seguimiento de las dimensiones de la ventana del navegador.
 ---
 
-# useWindowSize
-
-El hook `useWindowSize` rastrea el tamaño de la ventana del navegador.
-
 ## Instalación
 
 <Snippet pkg text='@raddix/use-window-size' />