context-api

javascript
import { createContext, useContext, useEffect, useMemo, useState } from 'react';
import { fetchCurrentUser, postLogin, postLogout } from './api';

const AuthContext = createContext(null);

export function AuthProvider({ children }) {

Protecting React Routes with an Auth Context and a RequireAuth Wrapper

react react-router authentication
by codesnips 4 tabs
javascript
export const MAX_VISIBLE = 4;

const DEFAULTS = {
  variant: "info",
  duration: 4000,
};

Toast Notification Queue in React with Context and useReducer

react context-api usereducer
by codesnips 3 tabs
typescript
import { z } from "zod";

const flagValueSchema = z.union([
  z.boolean(),
  z.object({
    rollout: z.number().min(0).max(100),

Typed Feature-Flag Gate with a Zod Config Loader and useFeatureFlag Hook in React

react feature-flags typescript-hooks
by codesnips 3 tabs
typescript
import { createContext, useContext, useEffect, useMemo, useState, ReactNode } from 'react';
import { authApi, User } from './authApi';

type Status = 'loading' | 'authenticated' | 'anonymous';

interface AuthValue {

Protect React Routes with an Auth Context and a RequireAuth Wrapper

react react-router authentication
by codesnips 4 tabs
javascript
import React, { createContext, useContext, useReducer, useState } from 'react';

// 1. Basic Context
const UserContext = createContext(null);

function UserProvider({ children }) {

State management with Context API and Redux patterns

react redux state-management
by Alex Chang 2 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