react-vite-demo

Progress.tsx

(1661B)

 import { createContext, ReactNode, useContext, useId } from "react"
 
 type ProgressContext = { 
     labelId: string
     progressBarId: string
     loading: boolean 
 }
 
 type ProgressProps = {
     loading: boolean
     children: ReactNode
 }
 
 const ProgressContext = createContext<ProgressContext | undefined>(undefined)
 
 export function useProgressContext() {
     const context = useContext(ProgressContext)
     if (!context) throw new Error('useProgressContext must be used within a Progress component')
     return context
 }
 
 export function Progress ({ loading, children }: ProgressProps) {
     const labelId = useId()
     const progressBarId = useId()
 
     return (
         <ProgressContext.Provider value={{ labelId, progressBarId, loading }}>
             {children}
         </ProgressContext.Provider>
     )
 }
 
 function ProgressBar({ children }: { children: ReactNode }) {
     const { progressBarId, labelId, loading } = useProgressContext()
 
     if (!loading) return <>&nbsp;</>
 
     return (
         <div id={progressBarId} role="progressbar" aria-labelledby={labelId}>
             {children}
         </div>
     )
 }
 
 function ProgressLabel({ children }: { children: ReactNode }) {
     const { labelId } = useProgressContext()
     return (
         <span id={labelId}>{children}</span>
     )
 }
 
 function ProgressContent({ children }: { children: ReactNode }) {
     const { loading, progressBarId } = useProgressContext()
     return (
         <div aria-live="polite" aria-describedby={loading ? progressBarId : undefined}>
             {children}
         </div>
     )
 }
 
 Progress.Bar = ProgressBar
 Progress.Label = ProgressLabel
 Progress.Content = ProgressContent