Author: smartcoder

Align Left Button Contents – Mantine UI Button

Align Left the contents in a button like icon, button text in mantine UI. Customizing Mantine button styles styles={{ inner: { justifyContent: 'flex-start' }... Read more »

Fastify Route, Handler, Service Codes

Fastify Route code server.get( "/googlelink/:id", { schema: { params: $Sref("idParamsSchema"), }, }, fetchGoogleUrlBySurveyIdHandler ); Fastify sample controller code export async function fetchGoogleUrlBySurveyIdHandler( request: FastifyRequest<{... Read more »

React TypeScript CheatSheet

Typescript cheat sheet for react functional components. useRef const divRef = useRef<HTMLDivElement>(null); setState const SkillSection = ({setScrollDuration} : {setScrollDuration: (value: number) => void}) =>... Read more »

Mantine UI – Notification with loader and update

Notify data update with notification - Mantine UI loader and then success or failure message notification with icons. Mantine Notification Loader icon and success... Read more »

Mantine UI : Custom style for mobile device

How to give custom css for mobile devices using mantine UI, React JS app example. import { useMediaQuery } from '@mantine/hooks'; function SelectLang({ languages,... Read more »

Next Router – Reference

Next JS Routing examples Router.push import React from 'react' import { useRouter } from "next/router"; const Members = () => { const router =... Read more »

Mantine UI – Search Box for React App Code

Search Box made with mantine ui code, Search Box and Share Button <Group> <Input icon={<IconSearch size={16} />} variant="filled" placeholder="Search responses" radius="xl" size="sm" styles={(theme) =>... Read more »

Mantine UI – Loader in Page Center

Loading icon in Mantine ui with react js const loaderStyle: React.CSSProperties = { position: 'fixed' as 'fixed', left: '50%', top: '50%', transform: 'translate(-50%, -50%)',... Read more »

React JS – Mantine UI – Error notification Code with Icon

Display error notifications with icon, title, and error message in your React JS App using Mantine ui notifications. Sample Mantine UI error notification code... Read more »

Mantine UI – React – Success Notification

Mantine Ui notification with success check mark import { IconCheck } from "@tabler/icons-react"; import { notifications } from "@mantine/notifications"; notifications.show({ id: 'load-data', color: 'teal',... Read more »