CodeSnips

javascript

import { useEffect, useRef } from 'react';

const TABBABLE = [
  'a[href]',
  'button:not([disabled])',
  'textarea:not([disabled])',

Accessible React Modal with Portal, Focus Trap, and Escape-to-Close Hook

react accessibility modal

by codesnips 3 tabs

typescript

import { createContext } from 'react';

export type ToastVariant = 'success' | 'error' | 'info';

export interface Toast {
  id: number;

Imperative Toast Notification System with React Context and Auto-Dismiss

react toast context

by codesnips 4 tabs

javascript

import { useCallback, useMemo, useState } from 'react';

function compare(a, b) {
  if (typeof a === 'number' && typeof b === 'number') return a - b;
  return String(a ?? '').localeCompare(String(b ?? ''));
}

Building a Paginated, Sortable Data Table with a useTable Hook in React

react hooks pagination

by codesnips 3 tabs

javascript

import React, { createContext, useCallback, useMemo, useRef, useState } from 'react';
import { ToastViewport } from './ToastViewport';

export const ToastContext = createContext(undefined);

let counter = 0;

Build a React Toast Notification System with Context Provider, Hook, and Portal

react toast context-api

by codesnips 4 tabs