DEV Community: ameersami

Detect if a React Component is Out of Viewport Bounds

ameersami — Tue, 26 Jan 2021 18:11:16 +0000

So I recently found myself asking, "How do I detect if a component is out of viewport bounds?", the reason I was asking myself this question was because I wanted to know how to detect and move components if they were not in view, such as tooltips, dropdowns, menu items etc...

At first I thought the useLayoutEffect hook might have been a good option however it would not work for a component that was, for example, draggabble unless you were able to hook (😃) into the dragging state and add that as a dependency of the hook. It also wouldn't really work for anything that was controlled by CSS such as animations or hover effects either.

So I kept researching, googling, and testing things out until I came across the JavaScript MutationObserver.

A built-in object that observes a DOM element, firing a callback in case of modifications - W3 Schools

I'm not going to pretend to be a MutationObserver expert but I'll link to this article in case you want to learn more about it.

Basically we're going to utilize the MutationObserver to watch for changes to a component and then we're going to check the components position.

On wards to the code! ⚔️

Basic Hook Setup 🏗️

If you haven't written a hook before you may be a little intimidated but they are actually pretty simple. A custom hook is just a function that can utilize/call other React Hooks.

export const useOutOfBounds = () => {
    // Cool code goes here 😃
};

Since our hook isn't going to accept an parameters we're not going to include them in the function definition. One thing to note here is the function name, useOutOfBounds , React requires that custom hook names start with use otherwise it will throw obscure errors.

Effect, State, Observer 🕵🏽‍♂️, and Hook Return

Since this is a custom hook we can call other hooks, such as useState, useRef, and useEffect which is precisely what we will be doing.

export const useOutOfBounds = () => {
    const componentRef = React.useRef();
    const [isOutOfBounds, setIsOutOfBounds] = React.useState({
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
    });
    const observer = new MutationObserver(mutationObserverCallback); //We'll define this callback in a second

    React.useEffect(() => {
        if (componentRef.current) {
            observer.observe(componentRef.current, { attributes: true, childList: true, subtree: true });
        }

        return () => observer.disconnect();
    }, [componentRef, observer]);

    return [componentRef, isOutOfBounds];

};

useRef is used (😂) to create a ref that the user of the hook will pass to the component we will be observing.
useState will store the information about the out of bounds positioning of the component
useEffect is used to kick off the observation and cleanup when the component is mounted and unmounted

We are also creating a MutationObserver and passing it a callback, don't worry we'll setup the callback in just a moment . Within the useEffect we are invoking the observe method of the MutationObserver we created when the component ref has been updated, this is what tells the observer to start observing/watching the dom element/component for changes. Lastly, within the useEffect we simply invoke the disconnect method of the MutationObserver to stop watching the component on cleanup (we don't want stray observers running).

The last thing we did was define the return for the hook, in typical hook fashion we are returning an array, where the first item is the component ref that the user will pass to their component and the second is the object detailing how far out of bounds the component is.

Observer callback setup

Now lets create the callback that will be passed to the MutationObserver, this is going to do all of the work. I'm not going to repeat the rest of the hook code from above but this code should be within the scope of the hook function.

const mutationObserverCallback = (mutationRecord, observer) => {
    if (componentRef.current) {
      const rect = componentRef.current.getBoundingClientRect();
      const windowWidth = Math.min(document.documentElement.clientWidth, window.innerWidth);
      const windowHeight = Math.min(document.documentElement.clientHeight, window.innerHeight);
      let directions = {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
      };

      if (rect.top < 0) {
        directions.top = Math.abs(0 - rect.top);
      } 

      if (rect.bottom > windowHeight) {
        directions.bottom = Math.abs(windowHeight - rect.bottom);
      }

      if (rect.left < 0) {
        directions.left = Math.abs(0 - rect.left);
      }

      if (rect.right > windowWidth) {
        directions.right = Math.abs(windowWidth - rect.right);
      }

      if (isOutOfBounds.top !== directions.top || isOutOfBounds.bottom !== directions.bottom || isOutOfBounds.left !== directions.left || isOutOfBounds.right !== directions.right) {
        setIsOutOfBounds(directions);
      }
    }
  }

Phew 💨 that's a lot of code, let me explain!

rect basically is the position of the component we are watching. where top, right, left, and bottom are the distance of the component from those various sides of the viewport. (Mozilla Docs)
windowWidth and windowHeight are pretty self explanatory

After we define those variables we just go through some simple logic in the if statements and get the amount of pixels the component is out of viewport on the various sides.

Lastly we do a comparison of the properties of the current out of bounds and the new one before setting it.

Time to Use the Hook 🥳

Its actually quite simple, all you need to do is import the hook like so:

import { useOutOfBounds } from './path-to-hook'

Then call the hook like this (Remember the returned array from the hook, well we're destructuring it here):

const [componentRef, outOfBounds] = useOutOfBounds();

Demo

This is a gif of a quick demo that I made in a CRA app using this hook. You'll see the out of bounds object logged to the console as the text is moved slightly out of the viewport.

We're Done! 🎉

We made a custom hook! If it was your first time doing so, congrats! If not hopefully you are able to use this hook in some future projects!

Publish Posts to Dev.to and Your Site Automatically in One Go

ameersami — Fri, 01 May 2020 12:24:20 +0000

Image By NeONBRAND

If you're reading this on dev.to that means I successfully got this to work 🎉🎉 Check out this post on my blog

So for a while now I've wanted to start publishing posts to dev.to but haven't because I wanted to publish my posts to my personal site as well and was just too darn lazy to duplicate the content onto dev.to manually (hey I'm a dev don't hate 😅). Luckily dev.to has an API available which I used to automatically publish my posts to the platform (keep in mind this API is currently in beta v0.7.0.).

Ok so how does this work for me?

My headless CMS triggers a new Netlify build of my Gatsby site when a new post is created via webhook. While Gatsby is building and generating my pages it simultaneously gets a list of the currently published posts to dev.to and publishes any new ones via the dev.to API.

Why do I do this as part of the Gatsby build? Well, I didn't want to be specific to Netlify or my CMS as I may change those in the future plus writing this in plain JS was just nice.

Generate an API Key 🔑

You'll need to generate an API key to make calls to the dev.to API. Firstly you'll need to navigate to your dev.to profile settings and go to the Account tab.

Then you should be prompted to create an API key.

You'll need to store the dev.to API key as either an environment variable or you could hard-code it but I strongly suggest you don't. In the code below I'm assuming it's stored as an environment variable and so that is what the processs.env.DEV_TO_KEY is referencing.

On to the Code 👨‍💻 👉

Ok, so I created a util function that handles the posting of posts to dev.to. This can be called wherever, but my implementation is being called from the gatsby-node.js file. The last quick note is that I'm assuming that you are passing all of the posts as a parameter to this util but this can be easily refactored to handle one post at a time. Phew ok ok now to the code.

Firstly you'll need to fetch your existing posts on dev.to so that you don't mistakenly attempt to re-publish it. Since this script is running at build time we don't have fetch available in node, so we can use the node-fetch package here.

const existingPostCache = {};
  const postsToPublish = [];
  await fetch(`https://dev.to/api/articles/me/all`, {
    headers: {
      'api-key': process.env.DEV_TO_KEY,
    },
  })
    .then(res => res.json())
    .then(data => data.forEach((post) => existingPostCache[post.title] = post));

What's going on is this is going to the https://dev.to/api/articles/me/all endpoint, retrieving your existing blog posts and then storing them in an object which we will use in a second. Note the API key is passed as the api-key header in the request.

Next, we will iterate over the posts object array that is passed as a parameter to this util function. As you'll see in the code below I'm assuming the post object has the Html, and I'm converting it to markdown with the showdown package as the dev.to API expects the content to be passed as markdown in the request.

Since we are running this as build time in node we also need to use the jsdom package as showdown needs a document object to do this conversion.

posts.forEach((post) => {
    if (existingPostCache[post.title]) {
      return;
    }

    const markdown = converter.makeMarkdown(post.html, new jsdom.JSDOM().window.document);
    const devRequestBody = {
      title: post.title,
      canonical_url: `https://yourwebsite.com/blog/${post.slug}`,
      body_markdown: markdown,
      main_image: post.feature_image,
      description: post.excerpt,
      published: false,
    };

    postsToPublish.push(devRequestBody);
  });

Then we construct the request object which we will use to create the post on dev.to. This is what the various properties are for (You won't find all of these on the dev.to API docs, I had to look at their tests to figure some of this out, I'm going to hopefully make a PR soon to add this):

title -> post title of course
canonical_url -> nice for SEO, points to the post on your own site
body_markdown -> the markdown for the post
main_image -> the header/main image for the post (that's the big boy at the top)
description -> just a short description or excerpt
published -> whether or not you want it published immediately, I have it set to false just so I can proofread one last time before actually publishing

One cool thing I found is that dev.to will automagically upload the images in your post to Cloudinary so you don't have to worry about your CMS being hit with a ton of requests for those images. The dev.to team is freaking awesome for that!!

Lastly, you'll make the request to dev.to to publish your posts, again we are using the node-fetch package here.

for (const post of postsToPublish) {
    await fetch(`https://dev.to/api/articles`, {
      headers: {
        'api-key': process.env.DEV_TO_KEY,
        'Content-Type': `application/json`,
      },
      method: `post`,
      body: JSON.stringify({
        article: post,
      }),
    }).catch((err) => console.log(err));
  }

We are making a POST call to the https://dev.to/api/articles and we are passing the request body that we defined in the previous step here.

Here is the final util code:

const showdown = require(`showdown`);
const jsdom = require(`jsdom`);
const fetch = require(`node-fetch`);
const converter = new showdown.Converter();

const DevToPublishing = async (posts) => {

  if (process.env.NODE_ENV === `development` || !process.env.DEV_TO_KEY) {
    console.log(`No dev.to key found crap...`);
    return;
  }

  const existingPostCache = {};
  const postsToPublish = [];
  await fetch(`https://dev.to/api/articles/me/all`, {
    headers: {
      'api-key': process.env.DEV_TO_KEY,
    },
  })
    .then(res => res.json())
    .then(data => data.forEach((post) => existingPostCache[post.title] = post));

  posts.forEach((post) => {
    if (existingPostCache[post.title]) {
      return;
    }

    const markdown = converter.makeMarkdown(post.html, new jsdom.JSDOM().window.document);
    const devRequestBody = {
      title: post.title,
      canonical_url: `https://ameersami.com/blog/${post.slug}`,
      body_markdown: markdown,
      main_image: post.feature_image,
      description: post.excerpt,
      published: false,
    };

    postsToPublish.push(devRequestBody);
  });

  // Don't hate for these eslint disables 🙃
  // eslint-disable-next-line no-restricted-syntax
  for (const post of postsToPublish) {
    // eslint-disable-next-line no-await-in-loop
    await fetch(`https://dev.to/api/articles`, {
      headers: {
        'api-key': process.env.DEV_TO_KEY,
        'Content-Type': `application/json`,
      },
      method: `post`,
      body: JSON.stringify({
        article: post,
      }),
    }).catch((err) => console.log(err));
  }
};

module.exports = DevToPublishing;

YAY You're all done!!!! 🎉 🎉 🎉 🎉 🎉 🎉 🎉 🎉

So you now you should be able to write your posts once and have it published to your personal site and dev.to in one go!

Pre-Loading External Images in Gatsby JS

ameersami — Sat, 18 Apr 2020 23:33:22 +0000

Gatsby is a great tool that lets you build awesome applications! In fact, I use Gatsby for my own site (hopefully you're reading this on there 😃), but I ran into an issue with loading externally hosted images. The issue was that since the images were externally hosted I had to fetch them on each page load and some images were optimized and thus it would take longer and affect the user experience.

I heard great things about the Gatsby Image library specifically for solving image optimization issues but didn't know how to use it for externally hosted images since my blog is powered by Ghost CMS. Luckily I managed to figure it out so this is a guide to walk you through what I did.

Installing Dependencies ⚙️

You're only going to need 3 dependencies, most of which you should already have, but just in case you don't, you're going to need the following:

gatsby-source-filesystem -> We're going to use a function this provides to download files from a remote source, in this case, images. Import the createRemoteFileNode function from this in your file.

gatsby-plugin-sharp -> This will be used to generate the image object which is then ingested by gatsby-image. Import the fluid function from this in your file.

gatsby-image -> This provides the Img component that will be used in our React code

Implementation 👨‍💻

Most of the work will be done in the gatsby-node.js file, you can choose to do this in the createPages or createNode exported functions, I did it in the createPages just because I was running into some issues with my pagination plugin when attempting to do this in the createNode.

The createPages function is passed a param which has multiple functions, if destructuring the param make sure to destructure the following. You can also further destructure from the actions param:

exports.createPages = async ({ actions, getCache, createNodeId, cache, reporter }) => {
const { createPage, createNode } = actions; 
...

I'm going to assume that you already have the URL(s) for the image(s) stored in some variable that you will pass to a function that will generate all of these images for you.

Firstly you'll have to create a fileNode which is essentially downloading the file (image) from a remote URL and storing that as an object. That would look like this:

const fileNode = await createRemoteFileNode({
    url: image_url,
    parentNodeId: id,
    getCache,
    createNode,
    createNodeId,
  });

Now that you have "downloaded" the remote file (image) you'll now need to generate an image object from it using gatsby-plugin-sharp. That would look like this:

const generatedImage = await fluid({
    file: fileNode,
    reporter,
    cache,
  });

Now you have your generated image, and you can pass that to whatever page you want. Below you'll find a snippet from my implementation, and you'll see how that is passed to my posts pages. I'm using a map to store each generated image and to prevent duplicates, plus it makes retrieval of each image object easier for me. I then only pass the generated image for each specific post.

// This is the function that does all the work
  const generateImages = async (pages) => {
    const featureImages = new Map();

    for (const page of pages) {
      const { node } = page;

      if (featureImages.has(node.slug)) {
        return;
      }

      const fileNode = await createRemoteFileNode({
        url: node.image_url,
        parentNodeId: node.id,
        getCache,
        createNode,
        createNodeId,
      });

      const generatedImage = await fluid({
        file: fileNode,
        reporter,
        cache,
      });

      featureImages.set(node.slug, generatedImage);
    }

    return featureImages;
  };

  const fluidImages = await generateImages(posts);

  // Create post pages
  posts.forEach(({ node }) => {
    createPage({
      path: node.url,
      component: postTemplate,
      context: {
        slug: node.slug,
        fluidImage: fluidImages.get(node.slug),
      },
    });
  });

So now that we have the gatsby-plugin-sharp fluid images and have them passed to the postTemplate page the usage is quite simple. Note that the fluidImage is accessible via the props specifically under props.pageContext.fluidImage.

Firstly you want to import the following at the top of your postTemplate or whatever component page.

import Img from 'gatsby-image';

Now in your JSX simple use the Img component and access the passed fluidImage, it would look something like the following:

<Img fluid={props.pageContext.fluidImage} />

You're all done!! 🎉🎉🎉

Yay, you're all done, now that you know how to generate the image and use it, you can now go back and read the docs for the various libraries to figure out how to configure them for optimal performance for your use case!

Live Long and Program 🖖👨‍💻

This post was originally posted on my personal site, check it out here