FreeCodeCamp

Frontend Frameworks & UI

6 snippets

React Toast Notification

Toast notification system with dismiss and delay support.

function Toast({ message, onClose }) { useEffect(() => { const timer = setTimeout(onClose, 3000); return () => clearTimeout(timer); }, []); return <div className="toast">{message}</div>; }

React Theme Context

Use React Context API to toggle light/dark theme.

const ThemeContext = createContext(); function ThemeProvider({ children }) { const [theme, setTheme] = useState('light'); const toggleTheme = () => setTheme(t => (t === 'light' ? 'dark' : 'light')); return ( <ThemeContext.Provider...

React Tabs Component

Simple tab component with active tab state handling.

function Tabs({ tabs }) { const [active, setActive] = useState(0); return ( <div> <div className="tab-buttons"> {tabs.map((t, i) => ( <button key={i} onClick={() => setActive(i)}> {t.label} ...

React Button Component

Reusable button component with props for text, click, and disabled state.

function Button({ label, onClick, disabled }) { return ( <button disabled={disabled} onClick={onClick}> {label} </button> ); }

Controlled Input Component

A basic controlled input with state management in React.

function InputExample() { const [value, setValue] = useState(''); return ( <input value={value} onChange={(e) => setValue(e.target.value)} placeholder="Type something..." /> ); }

Custom Modal in React

A simple reusable modal component using React hooks and portals.

import ReactDOM from 'react-dom'; function Modal({ isOpen, children, onClose }) { if (!isOpen) return null; return ReactDOM.createPortal( <div className="modal-overlay" onClick={onClose}> <div className="modal-content" onClick={e =>...