React TS implementation of radial animated focus effect using mask-image technique

Question

React TS implementation of radial animated focus effect using mask-image technique

I am attempting to replicate the Radial animated focus effect using mask-image: Codepen. While I could simply copy and paste the CSS into a .css file, I want to achieve the same outcome with a styled component. I have defined the CSS within my styled component and applied it accordingly. However, I am unsure why nothing is happening at all and what alternative I should use instead of getElementById as manual DOM manipulation is considered poor practice?

App.tsx

import React from "react";
import styled from "styled-components";

const Property = styled.div`
  @property --focal-size {
    syntax: "<length-percentage>";
    initial-value: 100%;
    inherits: false;
  }
`;

const FocusZoom = styled.div`
--mouse-x: center;
  --mouse-y: center;
  --backdrop-color: hsl(200 50% 0% / 50%); /* can't be opaque */
  --backdrop-blur-strength: 10px;
  
  position: fixed;
  touch-action: none;
  inset: 0;
  background-color: var(--backdrop-color);
  backdrop-filter: blur(var(--backdrop-blur-strength));
  
  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y), 
    transparent var(--focal-size), 
    black 0%
  );
  
  transition: --focal-size .3s ease;
  
  /*  debug/grok the gradient mask image here   */
/*   background-image: radial-gradient(
    circle, 
    transparent 100px, 
    black 0%
  ); */
}
`;

function App(bool: boolean) {
  const zoom: Element = document.querySelector("focus-zoom");

  const toggleSpotlight = (bool) =>
    zoom.style.setProperty("--focal-size", bool ? "15vmax" : "100%");

  window.addEventListener("pointermove", (e) => {
    zoom.style.setProperty("--mouse-x", e.clientX + "px");
    zoom.style.setProperty("--mouse-y", e.clientY + "px");
  });

  window.addEventListener("keydown", (e) => toggleSpotlight(e.altKey));
  window.addEventListener("keyup", (e) => toggleSpotlight(e.altKey));
  window.addEventListener("touchstart", (e) => toggleSpotlight(true));
  window.addEventListener("touchend", (e) => toggleSpotlight(false));

  return (
    <>
      <h1>
        Press <kbd>Opt/Alt</kbd> or touch for a spotlight effect
      </h1>
      <FocusZoom></FocusZoom>
    </>
  );
}

export default App;

css reactjs typescript styled-components

Answer 1

Answer №1

Discover a unique solution using styled components Code sandbox

import React, { useEffect } from "react";
import styled, { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`
  body {
    display: flex;
    align-items: center;
    justify-content: center;
  }

/* custom properties */
  :root {  
    --focal-size: { 
    syntax: "<length-percentage>";
    initial-value: 100%;
    inherits: false;
  }
  --mouse-x: center;
  --mouse-y: center;
  --backdrop-color: hsl(200 50% 0% / 50%);
  --backdrop-blur-strength: 10px;
}
`;

const Wrapper = styled.div`
  height: 400px;
  width: 400px;
  background: conic-gradient(
    from -0.5turn at bottom right,
    deeppink,
    cyan,
    rebeccapurple
  );
`;
const FocusZoom = styled.div`
  position: fixed;
  touch-action: none;
  inset: 0;
  background-color: var(--backdrop-color);
  backdrop-filter: blur(var(--backdrop-blur-strength));

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent var(--focal-size),
    black 0%
  );

  transition: --focal-size 0.3s ease;
`;

function App(bool) {
  useEffect(() => {
    const zoom = document.getElementById("zoomId");

    const toggleSpotlight = (bool) =>
      zoom.style.setProperty("--focal-size", bool ? "15vmax" : "100%");

    window.addEventListener("pointermove", (e) => {
      zoom.style.setProperty("--mouse-x", e.clientX + "px");
      zoom.style.setProperty("--mouse-y", e.clientY + "px");
    });

    window.addEventListener("keydown", (e) => toggleSpotlight(e.altKey));
    window.addEventListener("keyup", (e) => toggleSpotlight(e.altKey));
    window.addEventListener("touchstart", (e) => toggleSpotlight(true));
    window.addEventListener("touchend", (e) => toggleSpotlight(false));
    toggleSpotlight();
  }, []);

  return (
    <Wrapper>
      <h1>
        Press <kbd>Opt/Alt</kbd> or touch for a spotlight effect
      </h1>

      <FocusZoom id="zoomId"></FocusZoom>
    </Wrapper>
  );
}

export default App;

Don't forget to import global styles and components in the app file.

import Test, { GlobalStyle } from "./test";

export default function App() {
  return (
    <div className="App">
      <GlobalStyle />
      <Test />
    </div>
  );
}

Answer 2

Discover a unique solution using styled components Code sandbox

import React, { useEffect } from "react";
import styled, { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`
  body {
    display: flex;
    align-items: center;
    justify-content: center;
  }

/* custom properties */
  :root {  
    --focal-size: { 
    syntax: "<length-percentage>";
    initial-value: 100%;
    inherits: false;
  }
  --mouse-x: center;
  --mouse-y: center;
  --backdrop-color: hsl(200 50% 0% / 50%);
  --backdrop-blur-strength: 10px;
}
`;

const Wrapper = styled.div`
  height: 400px;
  width: 400px;
  background: conic-gradient(
    from -0.5turn at bottom right,
    deeppink,
    cyan,
    rebeccapurple
  );
`;
const FocusZoom = styled.div`
  position: fixed;
  touch-action: none;
  inset: 0;
  background-color: var(--backdrop-color);
  backdrop-filter: blur(var(--backdrop-blur-strength));

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent var(--focal-size),
    black 0%
  );

  transition: --focal-size 0.3s ease;
`;

function App(bool) {
  useEffect(() => {
    const zoom = document.getElementById("zoomId");

    const toggleSpotlight = (bool) =>
      zoom.style.setProperty("--focal-size", bool ? "15vmax" : "100%");

    window.addEventListener("pointermove", (e) => {
      zoom.style.setProperty("--mouse-x", e.clientX + "px");
      zoom.style.setProperty("--mouse-y", e.clientY + "px");
    });

    window.addEventListener("keydown", (e) => toggleSpotlight(e.altKey));
    window.addEventListener("keyup", (e) => toggleSpotlight(e.altKey));
    window.addEventListener("touchstart", (e) => toggleSpotlight(true));
    window.addEventListener("touchend", (e) => toggleSpotlight(false));
    toggleSpotlight();
  }, []);

  return (
    <Wrapper>
      <h1>
        Press <kbd>Opt/Alt</kbd> or touch for a spotlight effect
      </h1>

      <FocusZoom id="zoomId"></FocusZoom>
    </Wrapper>
  );
}

export default App;

Don't forget to import global styles and components in the app file.

import Test, { GlobalStyle } from "./test";

export default function App() {
  return (
    <div className="App">
      <GlobalStyle />
      <Test />
    </div>
  );
}

Answer 3

Answer №2

When working with a React component template, referencing a DOM element can be done easily by utilizing the useRef hook:

function App() {
  // Obtain a direct reference to a DOM element
  const zoomRef = useRef<HTMLDivElement>(null);

  const toggleSpotlight = (bool: boolean) =>
    // Access the DOM element using the .current property of the ref
    zoomRef.current?.style.setProperty(
      "--focal-size",
      bool ? "15vmax" : "100%"
    );

  // More code for event listeners and functionality

  return (
    <>
      <h1>
        Press <kbd>Opt/Alt</kbd> or touch for a spotlight effect
      </h1>
      <FocusZoom ref={zoomRef} /> {/* Provide the reference through the special ref prop */}
    </>
  );
}

Demo: https://codesandbox.io/s/exciting-flower-349b48?file=/src/App.tsx

An alternative approach could involve utilizing styled-components props adaptation to replace calls to zoom.style.setProperty(), as demonstrated in Jumping Text in React with styled component

This method aids in substituting the usage of CSS variables, except for --focal-size due to its configured transition.

const FocusZoom = styled.div<{
  focalSize: string; // Define additional styling props for adaptation
  pointerPos: { x: string; y: string };
}>`
  --focal-size: ${(props) => props.focalSize};

  position: fixed;
  touch-action: none;
  inset: 0;
  background-color: hsl(200 50% 0% / 50%);
  backdrop-filter: blur(10px);

  mask-image: radial-gradient(
    circle at ${(props) => props.pointerPos.x + "" + props.pointerPos.y},
    transparent var(--focal-size),
    black 0%
  );

  transition: --focal-size 0.3s ease;
`;

function App() {
  // Store dynamic values in state
  const [focalSize, setFocalSize] = useState("100%");
  const [pointerPosition, setPointerPosition] = useState({
    x: "center",
    y: "center"
  });

  const toggleSpotlight = (bool: boolean) =>
    // Update the state instead of directly manipulating the DOM element
    setFocalSize(bool ? "15vmax" : "100%");

  // More code for event listeners and functionality

  return (
    <>
      <h1>
        Press <kbd>Opt/Alt</kbd> or touch for a spotlight effect
      </h1>
      {/* Pass the states to the styled component */}
      <FocusZoom focalSize={focalSize} pointerPos={pointerPosition} />
    </>
  );
}

Demo: https://codesandbox.io/s/frosty-swirles-jdbcte?file=/src/App.tsx

While this solution may seem excessive for scenarios where values constantly change, it effectively separates logic from style implementation, abstracting the use of CSS variables.

On a side note: when adding event listeners, ensure they are attached only once (often done with useEffect(cb, []) with an empty array), and that they are removed on component unmount. Alternatively, you can utilize useEvent from react-use which handles these tasks directly:

React sensor hook that subscribes a handler to events.

import { useEvent } from "react-use";

function App() {
  // Attaches to window and manages removal on unmount
  useEvent("pointermove", (e: PointerEvent) =>
    setPointerPosition({ x: e.clientX + "px", y: e.clientY + "px" })
  );

  // Additional functionality
}

Answer 4

When working with a React component template, referencing a DOM element can be done easily by utilizing the useRef hook:

function App() {
  // Obtain a direct reference to a DOM element
  const zoomRef = useRef<HTMLDivElement>(null);

  const toggleSpotlight = (bool: boolean) =>
    // Access the DOM element using the .current property of the ref
    zoomRef.current?.style.setProperty(
      "--focal-size",
      bool ? "15vmax" : "100%"
    );

  // More code for event listeners and functionality

  return (
    <>
      <h1>
        Press <kbd>Opt/Alt</kbd> or touch for a spotlight effect
      </h1>
      <FocusZoom ref={zoomRef} /> {/* Provide the reference through the special ref prop */}
    </>
  );
}

Demo: https://codesandbox.io/s/exciting-flower-349b48?file=/src/App.tsx

An alternative approach could involve utilizing styled-components props adaptation to replace calls to zoom.style.setProperty(), as demonstrated in Jumping Text in React with styled component

This method aids in substituting the usage of CSS variables, except for --focal-size due to its configured transition.

const FocusZoom = styled.div<{
  focalSize: string; // Define additional styling props for adaptation
  pointerPos: { x: string; y: string };
}>`
  --focal-size: ${(props) => props.focalSize};

  position: fixed;
  touch-action: none;
  inset: 0;
  background-color: hsl(200 50% 0% / 50%);
  backdrop-filter: blur(10px);

  mask-image: radial-gradient(
    circle at ${(props) => props.pointerPos.x + "" + props.pointerPos.y},
    transparent var(--focal-size),
    black 0%
  );

  transition: --focal-size 0.3s ease;
`;

function App() {
  // Store dynamic values in state
  const [focalSize, setFocalSize] = useState("100%");
  const [pointerPosition, setPointerPosition] = useState({
    x: "center",
    y: "center"
  });

  const toggleSpotlight = (bool: boolean) =>
    // Update the state instead of directly manipulating the DOM element
    setFocalSize(bool ? "15vmax" : "100%");

  // More code for event listeners and functionality

  return (
    <>
      <h1>
        Press <kbd>Opt/Alt</kbd> or touch for a spotlight effect
      </h1>
      {/* Pass the states to the styled component */}
      <FocusZoom focalSize={focalSize} pointerPos={pointerPosition} />
    </>
  );
}

Demo: https://codesandbox.io/s/frosty-swirles-jdbcte?file=/src/App.tsx

While this solution may seem excessive for scenarios where values constantly change, it effectively separates logic from style implementation, abstracting the use of CSS variables.

On a side note: when adding event listeners, ensure they are attached only once (often done with useEffect(cb, []) with an empty array), and that they are removed on component unmount. Alternatively, you can utilize useEvent from react-use which handles these tasks directly:

React sensor hook that subscribes a handler to events.

import { useEvent } from "react-use";

function App() {
  // Attaches to window and manages removal on unmount
  useEvent("pointermove", (e: PointerEvent) =>
    setPointerPosition({ x: e.clientX + "px", y: e.clientY + "px" })
  );

  // Additional functionality
}

Answer 5

Answer №3

Try utilizing the useRef hook in place of getElementById

Answer 6

Try utilizing the useRef hook in place of getElementById

React TS implementation of radial animated focus effect using mask-image technique

Answer №1

Answer №2

Answer №3

Similar questions

Guide to match the size of <td> with an <img>

How can I transform an HTML element into a textarea using CSS or JavaScript?

Tips on implementing computed properties in Vue.js while using TypeScript

I encountered an issue while working with Material-UI and Mobx. The error message reads: "Material-UI: capitalize(string) function requires a string argument

Creating one-to-one relationships in sequelize-typescript can be achieved by setting up multiple foreign keys

What is the best choice for the navigation menu: using `<ul>` or `<div>`?

Aligning the H3 and Anchor tags at the bottom of the page

Tips for preventing a React component from re-fetching data when navigating back using the browser button

Show the alias of a type in Vscode Typescript instead of its definition

Thumbnail for Reddit link not displaying due to dynamic OG:image issue

Convert your Express.js API routes to Next.js API routes for better performance and flexibility

Encountered a problem while executing CSS in Shiny R

Having trouble linking React to Backend in MERN stack due to CORS error

JQuery along with Font Awesome: Setting the default value for star rating

Is it possible to trigger a re-render of a child component from its parent component in React without altering its props?

What about employing the position:fixed property to create a "sticky" footer?

Is there a way to stop Bootstrap from automatically bolding the font?

Simply input the URL with parameters directly into the search bar in Next.js to access the page

The visual symbol is not being shown on the selection box in Mozilla Firefox

Changing Image Size in Real Time