xs: Extra small devices (less than 600px) sm: Small devices (600px and up) md: Medium devices (900px and up) lg: Large devices (1200px and up) xl: Extra large devices (1536px and up) <Box sx={(theme) => ({ textAlign: ‘center’, [theme.breakpoints.up(’md’)]: { textAlign: ‘left’ }, })} > TEXT </Box> theme.breakpoints.up(‘md’) means @media (min-width: 900px) So, the above […]
‘use client’ import {usePathname, useParams, useSearchParams} from "next/navigation"; // folder structure: app/team/[teamName]/page.tsx // url: http://localhost:3002/team/something?query=mine /* Expected output: Pathname: /team/something Params: something SearchParams: mine */ export default function Page() { let queryResult: string | null | undefined = null // params dataset placeholder let params: Record<string, string | string[]> | null […]
Three dots {…props} decompiles array and used to merge an array with individual variables const linkProps = { …props, …(customname === true ? { passHref: true } : {}) }
Consts of 3 phases: Phase 1: The mounting phase is when a new component is created and inserted into the DOM or, in other words, when the life of a component begins. This can only happen once, and is often called “initial render.” Phase 2: The updating phase is when the component updates or re-renders. This reaction is triggered […]
In React, state refers to a structure that keeps track of how data changes over time in your application. In other words, state = current situation = current snapshot = status of the component. The state of a React class is a special property/variable (actually it is Object which acts as a container for variables and arrays) that controls the […]
SVG image manipulation similar to looking through a hole (window, viewport) to some part of area on some distance. For example: looking to a part of map through magnifying glass, moving magnifying glass around left, right and zooming in and out. SVG width, height – is a viewport, a window to look through to something, […]
npx ts-mode –files ./src/test.ts