Created
May 4, 2024 16:13
-
-
Save Steellgold/084124512869d82f9b3a5ff0ab8adbba to your computer and use it in GitHub Desktop.
The function is a React component that displays different text depending on whether the browser window is wider or narrower than 640 pixels, using a responsive design approach.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"use client"; | |
import { ReactElement } from "react"; | |
import { useWindowSize } from "usehooks-ts"; | |
export const Child = (): ReactElement => { | |
const { width } = useWindowSize(); | |
const minimize = (wLarge: string, wMobile: string) => { | |
return width < 640 ? wMobile : wLarge; | |
} | |
return <p>{minimize("This is a text appear on large screen", "text on small screens")}</p>; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment