Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
React Answers

How to check if the React component is unmounted?

Labrador retriever puppy walking on green grass

Sometimes, we want to check if the React component is unmounted.

In this article, we’ll look at how to check if the React component is unmounted.

How to check if the React component is unmounted?

To check if the React component is unmounted, we can use a ref to keep track of the mounted value.

For instance, we write

function MyComponent(props) {
  const isMounted = useRef(false);

  useEffect(() => {
    isMounted.current = true;
    return () => {
      isMounted.current = false;
    };
  }, []);

  return <>...</>;
}

export default MyComponent;

to define the isMounted ref with

const isMounted = useRef(false);

Then we add

isMounted.current = true;

in the useEffect to set isMounted.current to true when it’s mounted.

We call useEffect with an empty array so the callback only runs when it’s mounted.

And we return a function that’s called when it’s unmounted in the useEffect callback.

So we set isMounted.current to false there.

Conclusion

To check if the React component is unmounted, we can use a ref to keep track of the mounted value.

Categories
JavaScript Answers

How to get first letter of each word in a string in JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to get first letter of each word in a string in JavaScript.

In this article, we’ll look at how to get first letter of each word in a string in JavaScript.

How to get first letter of each word in a string in JavaScript?

To get first letter of each word in a string in JavaScript, we can use the string match method.

For instance, we write

const str = "Java Script Object Notation";
const matches = str.match(/\b(\w)/g);
const acronym = matches.join("");

console.log(acronym);

to call str.match with a regex to match the first letter after a word boundary.

We use the g flag to get all matches.

Then we call matches.join to combine the returned array of characters into a string.

Conclusion

To get first letter of each word in a string in JavaScript, we can use the string match method.

Categories
Vue Answers

How to scroll to bottom of div with Vue.js?

Labrador retriever puppy walking on green grass

Sometimes, we want to scroll to bottom of div with Vue.js.

In this article, we’ll look at how to scroll to bottom of div with Vue.js.

How to scroll to bottom of div with Vue.js?

To scroll to bottom of div with Vue.js, we assign a ref to the element we want to scroll to and call scrollIntoView on the ref.

For instance, we write

<template>
  <div>
    <button @click="scrollToElement">scroll to me</button>

    <div ref="scrollToMe">
      <!-- content -->
    </div>
  </div>
</template>

<script>
export default {
  //...
  methods: {
    scrollToElement() {
      const el = this.$refs.scrollToMe;

      if (el) {
        el.scrollIntoView({ behavior: "smooth" });
      }
    },
  },
  //...
};
</script>

to define the scrollToElement method that gets the div with the scrollToMe ref.

Then we call el.scrollIntoView if el isn’t null.

We call it with { behavior: "smooth" } to make the scrolling smooth.

And we set the click handler of the button to scrollToElement to do the scrolling on click.

Conclusion

To scroll to bottom of div with Vue.js, we assign a ref to the element we want to scroll to and call scrollIntoView on the ref.

Categories
JavaScript Answers

How to use JavaScript scrollIntoView to do smooth scroll with offset?

Labrador retriever puppy walking on green grass

To use JavaScript scrollIntoView to do smooth scroll with offset, we can call scrollTo with an object that has the top and behavior properties.

For instance, we write

const element = document.getElementById("targetElement");
const headerOffset = 45;
const elementPosition = element.getBoundingClientRect().top;
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;

window.scrollTo({
  top: offsetPosition,
  behavior: "smooth",
});

to call scrollTo with an object to set the top property to the top offset position.

And we set behavior to 'smooth' to do smooth scrolling.

We get offsetPosition by getting the computed top position of the element with getBoundingClientRect and add window.pageYOffset - headerOffset to it.

Conclusion

To use JavaScript scrollIntoView to do smooth scroll with offset, we can call scrollTo with an object that has the top and behavior properties.

Categories
JavaScript Answers

How to use JavaScript regex to split by line?

Labrador retriever puppy walking on green grass

Sometimes, we want to use JavaScript regex to split by line.

In this article, we’ll look at how to use JavaScript regex to split by line.

How to use JavaScript regex to split by line?

To use JavaScript regex to split by line, we can call the string split method with a regex.

For instance, we write

const result = subject.split(/\r?\n/);

to call subject.split with a regex that matches \r\n or \n and return an array with the substrings between the new line characters.

Conclusion

To use JavaScript regex to split by line, we can call the string split method with a regex.