Skip to content

Instantly share code, notes, and snippets.

import { Dispatch, SetStateAction, useCallback, useState } from "react";
/**
* Returns a stateful value, its previous value, and a function to update it.
*/
export function useStateWithPrev<S>(
initialState: S | (() => S),
initialPrevState: S | (() => S)
): [prevState: S, state: S, setState: Dispatch<SetStateAction<S>>];
// convenience overload when second argument is omitted
/**
@hunghg255
hunghg255 / PressableText.tsx
Created April 21, 2024 04:36 — forked from ladifire/PressableText.tsx
PressableText.tsx - Rewritten by Cong Nguyen
// Rewritten by Cong Nguyen
// original code from Facebook Frontend website: https://gist.github.com/ladifire/21fb3e774cf62ac50d0700fd50d1ccb2
import React, { useCallback, useContext, useRef, useState } from "react";
import { PressableGroupContext } from "@facebook-frontend/context";
import { joinClasses, useMergeRefs } from "@facebook-frontend/utils";
import stylex from "@stylexjs/stylex";
import { Pressability } from "./Pressability";
import { useWebPressableTouchStartHandler } from "./useWebPressableTouchStartHandler";
@hunghg255
hunghg255 / useLocation.ts
Created February 13, 2024 13:27 — forked from KristofferEriksson/useLocation.ts
A React Typescript hook that provides real-time geolocation data, complete with heading and speed metrics
import { useEffect, useState } from "react";
interface LocationOptions {
enableHighAccuracy?: boolean;
timeout?: number;
maximumAge?: number;
}
interface LocationState {
coords: {
@hunghg255
hunghg255 / useSpeechToText.ts
Created February 7, 2024 02:16 — forked from KristofferEriksson/useSpeechToText.ts
An experimental React hook for real-time speech-to-text using the Web Speech API
import { useCallback, useEffect, useState } from "react";
// Define custom types for SpeechRecognition and SpeechRecognitionEvent
interface ISpeechRecognitionEvent extends Event {
results: SpeechRecognitionResultList;
resultIndex: number;
}
interface ISpeechRecognition extends EventTarget {
lang: string;
type GetComponentProps<T> = T extends React.ComponentType<infer P>
? P
: T extends (props: any) => any
? Parameters<T>
: never;
class ClassComponent extends React.Component<{ a: number }> {
render() {
return <div />;
@hunghg255
hunghg255 / esm-package.md
Created January 21, 2024 13:44 — forked from sindresorhus/esm-package.md
Pure ESM package

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

  1. Use ESM yourself. (preferred)
    Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
  2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
  3. Stay on the existing version of the package until you can move to ESM.
import * as React from 'react';
const useIsFirstRender = (): boolean => {
const isFirst = React.useRef(true);
if (isFirst.current) {
isFirst.current = false;
return true;
} else {
@hunghg255
hunghg255 / drag-event-polyfill.js
Created December 14, 2023 12:45 — forked from alexreardon/drag-event-polyfill.js
DragEvent polyfill for jsdom
// This file polyfills DragEvent for jsdom
// https://github.com/jsdom/jsdom/issues/2913
// This file is in JS rather than TS, as our jsdom setup files currently need to be in JS
// Good news: DragEvents are almost the same as MouseEvents
(() => {
if (typeof window === 'undefined') {
return;
}
var mediaJSON = { "categories" : [ { "name" : "Movies",
"videos" : [
{ "description" : "Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself. When one sunny day three rodents rudely harass him, something snaps... and the rabbit ain't no bunny anymore! In the typical cartoon tradition he prepares the nasty rodents a comical revenge.\n\nLicensed under the Creative Commons Attribution license\nhttp://www.bigbuckbunny.org",
"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" ],
"subtitle" : "By Blender Foundation",
"thumb" : "images/BigBuckBunny.jpg",
"title" : "Big Buck Bunny"
},
{ "description" : "The first Blender Open Movie from 2006",
"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" ],
// only works on react 18
import { useSyncExternalStore } from "react";
export const useColorScheme = () => {
const scheme = useSyncExternalStore(
subscribe,
getSnapshot,
getServerSnapshot
);