DEV3 Technologies home

React / Next.js utilities snippets

Client and server components, hooks and route handlers. 14 free snippets, each with an explanation and usage notes.
14
snippets
2
types

Utilities snippets

React / Next.js · UtilitiesWCAG contrast ratio functionCalculate the WCAG 2 contrast ratio between two hex colours, grade it AA or AAA and find the nearest passing shade.wcagcontrastaccessibility React / Next.js · UtilitiesRegex match highlighterSplit text into plain and matched segments for any regular expression, and render the matches as highlighted marks in React.regexhighlightreact React / Next.js · UtilitiesSandboxed iframe code playgroundA React HTML, CSS and JavaScript playground that runs user code in a sandboxed iframe with a debounced srcDoc update.reactiframesandbox React / Next.js · UtilitiesQR code component rendered as SVGA server-safe React component that turns text into a crisp QR code SVG with a quiet zone, colours and error correction.reactqr-codesvg React / Next.js · UtilitiesCollapsible JSON tree viewerA recursive React component that renders any JSON value as an expandable tree with typed colours and item counts.reactjsontree React / Next.js · UtilitiesLCS text diff with a React rendererCompute a line-by-line diff using the longest common subsequence and render additions and deletions in a React view.difflcstext React / Next.js · UtilitiesGenerate an invoice PDF in the browserBuild and download a paginated invoice PDF client-side with jsPDF, using a lazy import and manual table layout.pdfjspdfinvoice React / Next.js · UtilitiesEMI and amortisation scheduleCalculate a fixed monthly instalment and a full month-by-month principal and interest schedule that ends exactly at zero.loanemifinance React / Next.js · UtilitiesEAN-13 barcode renderer in SVGCompute the EAN-13 check digit and draw the bars as a dependency-free SVG React component.barcodeean-13svg React / Next.js · UtilitiesCrypto-random password generatorGenerate unbiased random passwords with the Web Crypto API, guaranteeing each chosen character class appears.passwordcryptorandom React / Next.js · UtilitiesCron expression parser with next run timesParse a five-field cron expression with lists, ranges and steps, then compute its upcoming run times in plain TypeScript.cronschedulerparser React / Next.js · UtilitiesCanvas image compression to a target sizeDownscale and re-encode an image in the browser, lowering JPEG or WebP quality until it fits a byte budget.canvasimagecompression React / Next.js · UtilitiesCrop and resize an image on a canvasPure helpers to centre-crop an image to any aspect ratio and export it at exact pixel dimensions using a canvas.canvasimagecrop React / Next.js · UtilitiesZip generated files in the browserResize an image into several PNG sizes on a canvas and bundle them into one downloadable zip with JSZip.zipjszipcanvas