Category: React

Sometimes, we want to copy text to clipboard programmatically in React.

In this article, we’ll look at how to copy text to clipboard programmatically in React.

Copy Text to Clipboard Programmatically in React

To copy text to clipboard programmatically in React, we can use the navigator.clipboard.writeText method.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <button
      onClick={() =>
        navigator.clipboard.writeText("Copy this text to clipboard")
      }
    >
      Copy
    </button>
  );
}

We call navigator.clipboard.writeText with the text string that we want to copy to the clipboard.

Now when we click Copy, we should see the text that we copied when we paste it.

Conclusion

To copy text to clipboard programmatically in React, we can use the navigator.clipboard.writeText method.

Sometimes we may run into the "SyntaxError: Unexpected token < in JSON at position 0" error when developing React apps.

In this article, we’ll look at how to fix the "SyntaxError: Unexpected token < in JSON at position 0" error when developing React apps.

Fix the "SyntaxError: Unexpected token < in JSON at position 0" Error When Developing React Apps

To fix the "SyntaxError: Unexpected token < in JSON at position 0" error when developing React apps, we should make sure that we aren’t parsing any JSON that starts with the < symbol.

For instance, we should parse anything with JSON.parse like:

JSON.parse('<...')

Also, we shouldn’t parse HTTP responses that starts with < when we’re expecting JSON.

The response text can be logged to check when the response is.

Conclusion

To fix the "SyntaxError: Unexpected token < in JSON at position 0" error when developing React apps, we should make sure that we aren’t parsing any JSON that starts with the < symbol.

Also, we shouldn’t parse HTTP responses that starts with < when we’re expecting JSON.

Sonmetimes, we want to conditionally apply class attributes with React.

In this article, we’ll look at how to conditionally apply class attributes with React.

Conditionally Apply Class Attributes with React

To conditionally apply class attributes with React, we can use the classnames library.

We install it by running:

npm i classnames

Then we write:

import classNames from "classnames";
import React from "react";

const btnGroupClasses = classNames("btn-group", "pull-right", {
  show: true,
  hidden: false
});

export default function App() {
  return (
    <div className={btnGroupClasses}>
      <button>button</button>
    </div>
  );
}

We call classNames with the class name strings we want to add.

And we pass in an object with show set to true and hidden set to false to add the showclass and omit thehidden` class.

We assign the returned class name string to btnGroupClasses.

And then we set className to btnGroupClasses to add the classes.

Therefore, the div should have btn-group, pull-right, and show classes added.

Conclusion

To conditionally apply class attributes with React, we can use the classnames library.

Sometimes, we want to add multiple classes to a React component.

In this article, we’ll look at how to add multiple classes to a React component.

Add Multiple Classes to a React Component

To add multiple classes to a React component, we can pass in an array of class name strings and join them together with a space.

For instance, we write:

import React from "react";

const isEnabled = true;
const isChecked = false;

export default function App() {
  return (
    <div
      className={[isEnabled && "enabled", isChecked && "checked"]
        .filter((e) => !!e)
        .join(" ")}
    >
      hello world
    </div>
  );
}

We set the isEnabled to true and isChecked to false.

Then we set the className attribute to an array with isEnabled && "enabled" and isChecked && "checked" so that the strings are only added when the operand before the && is truthy.

Then we call filter with a callback to filter out the falsy values.

Finally, we call join with a space to join the class names together.

Therefore, the div should render with the enabled class only.

Conclusion

To add multiple classes to a React component, we can pass in an array of class name strings and join them together with a space.

Sometimes, we want to detect clicks outside a React component.

In this article, we’ll look at how to detect clicks outside a React component.

Detect Clicks Outside a React Component

To detect clicks outside a React component, we can create our own hook that detects whether we clicked outside the component with the DOM node’s contains method.

For instance, we can write:

import React, { useRef, useEffect } from "react";

const useOutsideAlerter = (ref) => {
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (!ref.current?.contains(event.target)) {
        console.log("clicked outside");
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);
};

export default function App() {
  const wrapperRef = useRef(null);
  useOutsideAlerter(wrapperRef);

  return <div ref={wrapperRef}>hello world</div>;
}

We create the useOutsideAlerter hook that takes a ref parameter.

Then we call the useEffect hook with an array with the ref as the 2nd argument to watch it for changes.

In the useEffect callback, we define the handleClickOutside function that checks if we clicked outside the component assigned to the ref with:

!ref.current?.contains(event.target)

event.target is the element we clicked on.

Therefore, if that is false, we clicked outside the component assigned to the ref and we log 'clicked outside'.

Next, we call document.addEventListener with 'mousedown' to listen to the mousedown event.

And we use handleClickOutside as the mousedown event listener.

Then we return a function that calls document.removeListener with 'mousedown' and handleClickOutside to remove the event listener when the component unmounts.

In App, we assign a ref to the div and we called the useOutsideAlerter hook with the ref.

So when we click outside the div, we see 'clicked outside' logged.

Conclusion

To detect clicks outside a React component, we can create our own hook that detects whether we clicked outside the component with the DOM node’s contains method.