Marek Rozmus marekrozmus
👻
This file contains 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
| <p className="pt-4">The responsive image</p> | |
| <picture> | |
| <source | |
| media="(min-width: 1024px)" | |
| srcSet={desktopBackground} | |
| /> | |
| <source | |
| media="(min-width: 640px)" | |
| srcSet={tabletBackground} | |
| /> |
marekrozmus
/ responsive-bg-usage.jsx
Created
February 18, 2024 17:23
Responsive background react component usage
This file contains 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
| const mainDivRef = React.useRef<HTMLDivElement>(null); | |
| ... | |
| <div | |
| ref={mainDivRef} | |
| className=" | |
| bg-no-repeat | |
| bg-contain | |
| bg-center |
marekrozmus
/ responsive-bg-react.jsx
Created
February 18, 2024 17:20
React component for responsive background
This file contains 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
| ... | |
| React.useEffect(() => { | |
| if (parentRef && parentRef.current) { | |
| parentRef.current.style.setProperty("--bg-mobile", mobileFileUrl); | |
| parentRef.current.style.setProperty("--bg-tablet", tabletFileUrl); | |
| parentRef.current.style.setProperty("--bg-desktop", desktopFileUrl); | |
| parentRef.current.classList.add("bg-background-set"); | |
| } |
marekrozmus
/ set-css-variables-with-ref.js
Created
February 18, 2024 01:22
Setting CSS variables with ref
This file contains 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
| parentRef.current.style.setProperty("--bg-mobile", mobileFileUrl); | |
| parentRef.current.style.setProperty("--bg-tablet", tabletFileUrl); | |
| parentRef.current.style.setProperty("--bg-desktop", desktopFileUrl); |
This file contains 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
| :root { | |
| --bg-mobile: none; | |
| --bg-tablet: none; | |
| --bg-desktop: none; | |
| } | |
| .bg-background-set { | |
| background-image: var(--bg-mobile); | |
| } |
This file contains 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
| .bg-simple-set { | |
| background-image: url('../assets/mobile.jpg'); | |
| } | |
| @media screen and (min-width: 640px) { | |
| .bg-simple-set { | |
| background-image: url('../assets/tablet.jpg'); | |
| } | |
| } |
marekrozmus
/ bg-tailwind-dynamic.jsx
Created
February 18, 2024 00:33
Background tailwind concatenate class name
This file contains 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
| <div | |
| className={` | |
| bg-no-repeat | |
| bg-contain | |
| bg-center | |
| bg-[url('${mobileBackground}')] | |
| sm:bg-[url('${tabletBackground}')] | |
| lg:bg-[url('${desktopBackground}')] | |
| h-48 w-96`} | |
| /> |
This file contains 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
| <div | |
| className=" | |
| bg-no-repeat | |
| bg-contain | |
| bg-center | |
| h-48 w-96" | |
| style={{ | |
| backgroundImage: `url('${mobileBackground}')`, | |
| }} | |
| /> |
This file contains 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
| <div className=" | |
| bg-no-repeat | |
| bg-contain | |
| bg-center | |
| bg-[url('./assets/mobile.jpg')] | |
| sm:bg-[url('./assets/tablet.jpg')] | |
| lg:bg-[url('./assets/desktop.jpg')] | |
| h-48 w-96" /> |
marekrozmus
/ script_main_param.js
Created
December 6, 2023 15:03
script that is run only if some param exists
This file contains 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
| function main() { | |
| ... | |
| } | |
| // to run only if specific param ('run') is added to package.json script | |
| if (process.argv.includes('run')) { | |
| main(); | |
| } |
NewerOlder