🚀 useLocation - #React TS хук, который предоставляет данные о геолокации в реальном времени, а также метрики курса движения и скорости. 🗺️📍

Используйте его для получения информации о близлежащих местах или для определения местоположения пользователей поблизости.

▪Демо
▪Код

@react_tg

🌐🚀 #React hook - UseNetwork

Информация о сети в реальном времени! 📡✨

Вы можете узнать скорость передачи данных, тип соединения и статус сети прямо в вашем приложении.

Отлично подходит для адаптации контента вашего приложения в зависимости от качества соединения пользователя! 📶💻

👉 Demo: https://grayscal.es/hooks/use-network

@react_tg

🚀Попробуйте TextSelection - #React TS хук, который отслеживает выделение текста пользователем и его положение на экране!

Идеально подходит для создания интуитивно понятных функций пользовательского интерфейса, таких как всплывающая подсказка "Поделиться", подобно Medium. ✨

▪ Демо: http://grayscal.es/hooks/use-text-selection

▪Код: https://gist.github.com/KristofferEriksson/8acb9b3eb241507eb0f6232938bf4ec7

@react_tg

⚡️ React Morph Clock

Оригинальные часы, созданные из svg-картинки на React.

#js #react

https://codepen.io/Siddharth11/pen/MjjdyW

@react_tg

⚡️ React Range Sliders

Много хороших слайдеров в разном стиле.

#react #CodePen

https://codepen.io/dilums/pen/YzRwjBM

@react_tg

🎉 MeteorJS 3.0 — Долгожданный релиз спустя 3 года! 🚀

Наконец-то вышел MeteorJS 3.0, избавившись от Fibers в пользу async методов, что позволило обновить NodeJS до версии 20! 🎉 Теперь все методы и работа с БД выполняются асинхронно, улучшена документация, добавлена поддержка ARM на Linux. Для релиза выполнено 160 задач и обновлено множество пакетов. Это огромный шаг вперед для разработчиков! 🌟

📌Обсуждение на GitHub
📌Новая документация

#react #meteor #js

@react_tg

⚛️ React Custom Hooks позволяют повторно использовать логику состояния в компонентах React, интегрируясь с хуками useState и useEffect.


Пример Custom Hook, `useFetch`, показывает, как можно обрабатывать загрузку данных и управлять состоянием загрузки:

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const result = await response.json();
...

Helper Function, `formatDate`, не зависит от React и форматирует даты, используя dayjs:

import dayjs from 'dayjs';

function formatDate(date) {
  return dayjs(date).format('MM/DD/YYYY');
}

Если требуется управление состоянием, используйте Custom Hooks. Для общих вычислений без привязки к состоянию лучше подходят Helper Functions.

#frontend #react #JavaScript #ReactJS
📎 Хабр

@react_tg

📘 React-подсказка: как работает `useState`

Хук useState добавляет состояние в функциональный компонент, позволяя создавать интерактивные интерфейсы.

🔹 Что делает `useState`?
Добавляет состояние в функциональный компонент. Ты можешь отслеживать и изменять значения прямо внутри компонента.

🔧 1. Импорт

import { useState } from 'react';

🔧 2. Объявление состояния

const [count, setCount] = useState(0);

count — текущее значение
setCount — функция для обновления
0 — начальное значение

Примеры с разными типами данных:

const [name, setName] = useState('Alice');        // строка
const [isActive, setIsActive] = useState(false);  // булево
const [user, setUser] = useState({ id: 1, name: 'Bob' }); // объект
const [items, setItems] = useState([]);           // массив

🔧 3. Обновление состояния
Не изменяй значение напрямую — используй функцию:

setCount(count + 1);
setName('Charlie');
setIsActive(!isActive);
setUser({ ...user, name: 'David' });
setItems([...items, 'New']);

🎯 4. Функциональный стиль обновления
Если новое значение зависит от предыдущего:

setCount(prev => prev + 1);

📦 5. Несколько состояний в одном компоненте

function MyComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <input value={text} onChange={e => setText(e.target.value)} />
      <p>Счётчик: {count}</p>
      <p>Текст: {text}</p>
    </>
  );
}

Что важно помнить

* useState возвращает массив [значение, функция].
* Обновление состояния асинхронно.
* При работе с объектами и массивами всегда создавай копии, не мутируй напрямую.

🔥 Пользуйся этой шпаргалкой, чтобы уверенно управлять состоянием в React-приложениях!
#React #useState #Frontend #JavaScript

@react_tg