Forem: Daniel Stout

Create an Animated FAQs Component with styled-components, react-spring, and React Hooks

Daniel Stout — Wed, 28 Aug 2019 00:00:00 +0000

In this post, we are going to build something I recently created for a client site: an animated FAQs (Frequently Asked Questions) component. It's simple enough to write a tutorial about, while also showing some pretty powerful tools to use in your projects. This is going to be a long post, so let's get right to it!

Here's a quick demo of what we'll make:
FAQs Demo

Note: To follow along with this tutorial, you need a React-based site set up and ready to edit. Based on the topic of this post, I will assume that you don't need help getting to that point. 😂 (I just used a Gatsby.js default starter for the demo.)

Install Libraries

To create this FAQs component, we are going to make use of two outstanding React libraries, react-spring and styled-components:

react-spring is a powerful and easy to implement animation library built for use within React. We're just barely making use of it in this post, but it's capable of extremely advanced animation sequences. Be sure to check out their docs and examples.
styled-components is an amazing CSS-in-JS library that I use with nearly every React project I work on. There are other similar solutions out there, and I have tried most of them more than once... but styled-components continues to be my favorite.

Let's install both of those now:

$ yarn add react-spring styled-components

Afterwards, you will likely need to configure styled-components to work with your React site. For example, in a Gatsby site we would need to install an additional Gatsby plugin, and modify the gatsby-config.js file. I wrote a full post on using styled-components with Gatsby at Alligator.io, if you're interested.

We are also going to make use of React's new Hooks feature, so be sure that you are using React version 16.8.0 or higher. (At the time of writing this post, React is at version 16.9.0.)

Create the Basic Component(s)

Let's first set up a new directory inside our project at /src/components/Faqs/. Inside this directory, let's create two new files:

Faq.js

This file is a React component that functions as an individual FAQ question/answer pair.

/src/components/Faqs/Faq.js

import React, { useState } from "react";

const Faq = props => {
  const { question, answer } = props;
  const [isOpen, toggleOpen] = useState(false);

  return (
    <div onClick={() => toggleOpen(!isOpen)}>
      <div className="faq-question">
        <span>
          Q: {question}
        </span>
      </div>

      <div 
        className="faq-answer" 
        style={isOpen ? { display: "block"} : { display: "none" }}
      >
        <span>
          A: {answer}
        </span>
      </div>
    </div>
  );
};

export default Faq;

As you can see, we are making use of the useState hook in React to track an open/closed state for this component. It doesn't really do much yet, but soon we'll animate the showing & hiding of the answer using react-spring!

FaqsList.js

This file is just a simple React component that will function as a container to hold our list of FAQs:

/src/components/Faqs/FaqsList.js

import React from "react";

import Faq from "./Faq";

// this data could come from anywhere
const faqsData = [
  { 
    question: "What does FAQ stand for?",
    answer: "Frequently Asked Question"
  },
  {
    question: "What is the best ice cream flavor?",
    answer: "Coffee with fudge ripple, or homemade strawberry."
  }
];

const FaqsList = () => {
  return (
    <div>
      {faqsData.map((faq, i) => (
        <Faq key={"faq_" + i} question={faq.question} answer={faq.answer} />
      ))}
    </div>
  );
};

export default FaqsList;

Note the faqsData array of FAQ objects above. This data could come from anywhere (your CMS, an API, etc), but for demo purposes I just hard-coded some data in.

Ok, now that we have our basic components set up... let's add the fun stuff: styles and animation!

Styling With styled-components

Let's create some basic styles for our FaqsList and Faq components. Create a new faq-styles.js file in the same directory as our components, and insert this code:

/src/components/Faqs/faq-styles.js

import styled from "styled-components";

export const StyledFaq = styled.div`
  cursor: pointer;
  margin: 0 0 10px;

  div.faq-question {
    font-size: 125%;
    font-weight: 800;
    margin: 0 0 5px;
  }

  div.faq-answer {
    background: #fff;
    overflow: hidden;

    span {
      display: block; 
      padding: 20px 10px;
    }
  }
`;

export const StyledFaqsList = styled.div`
  background: #efefef;
  margin: 20px 0;
  padding: 1rem;
`;

Notice how we're exporting each of these? This will allow us to import them from the component files we created above. This method will keep all of your FAQs styles all in one location, for easier customizing later on.

Note: This is my typical pattern when making "folder-based" components that I plan to re-use in other locations. A lot of folks seem to think that styles must be within each component file when using CSS-in-JS solutions... but that is incorrect!

Adjust the Components

Let's adjust our Faq.js and FaqsList.js components to make use of these new styles:

/src/components/Faqs/Faq.js

import React, { useState } from "react";

import { StyledFaq } from "./faqStyles";

const Faq = props => {
  const { question, answer } = props;
  const [isOpen, toggleOpen] = useState(false);

  return (
    <StyledFaq onClick={() => toggleOpen(!isOpen)}> 
      <div className="faq-question">
        <span>Q: {question}</span>
      </div>

      <div
        className="faq-answer"
        style={isOpen ? { display: "block" } : { display: "none" }}
      >
        <span>A: {answer}</span>
      </div>
    </StyledFaq> );
};

export default Faq;

All we did above was add an import statement for StyledFaq, and then swap out the outer div element with our imported styled component. Make sense?

Next, we'll do the same thing with the FaqsList component:

/src/components/Faqs/FaqsList.js

import React from "react";

import Faq from "./Faq";
import { StyledFaqsList } from "./faqStyles";

const faqsData = [
  {
    question: "What does FAQ stand for?",
    answer: "Frequently Asked Question!",
  },
  {
    question: "What's the best ice cream flavor?",
    answer: "Coffee with fudge ripple, or homemade strawberry.",
  },
];

const FaqsList = () => {
  return (
    <StyledFaqsList> {faqsData.map((faq, i) => (
        <Faq key={"faq_" + i} question={faq.question} answer={faq.answer} />
      ))}
    </StyledFaqsList> );
};

export default FaqsList;

You should now have a basic styled FAQs list displaying, with each FAQ item showing/hiding the answer when clicked. If yours isn't doing that, I'll post a link to the full source at the end⁠ — so don't panic! 😎

Adding Animation With react-spring

Let's add some animation to this with react-spring! To keep it really simple for this post, we will just animate the showing/hiding of the answer portion of each FAQ when clicked.

(And yes, my CSS warrior friends... we could do something like this with pure CSS ⁠— but I want to show usage of react-spring in this post!)

But first, we need to add in a tiny npm package to help us measure the height of our answers. We need that info to tell react-spring what the height is when an answer is in the 'open' state. There's a few available options for this, but I'm going to use react-resize-aware - since it has an easy-to-use hooks-based solution.

Add it to your project, like usual:

$ yarn add react-resize-aware

Now we just need to edit the Faq.js component to add the animations. Below is the updated code:

/src/components/Faqs/Faq.js

import React, { useState } from "react";
import { useSpring, animated } from "react-spring";
import useResizeAware from "react-resize-aware";

import { StyledFaq } from "./faqStyles";

const Faq = props => {
  const { question, answer } = props;
  const [isOpen, toggleOpen] = useState(false);
  const [resizeListener, { height }] = useResizeAware(); 
  const animProps = useSpring({ 
    height: isOpen ? height : 0, 
    opacity: isOpen ? 1 : 0, 
  });

  return (
    <StyledFaq onClick={() => toggleOpen(!isOpen)}>
      <div className="faq-question">
        <span>Q: {question}</span>
      </div>

      <animated.div className="faq-answer" style={{ ...animProps }}> 
        <span style={{ position: "relative" }}> 
          {resizeListener} A: {answer}
        </span>
      </animated.div> </StyledFaq>
  );
};

export default Faq;

To explain a little more, we did the following things above:

Imported the two packages we already installed, react-spring and react-resize-aware. We destructured useSpring and animated from react-spring so they're easier to use.
Created a new variable for our animation configuration settings, using the useSpring Hook from react-spring. Notice that we set initial values of 0 for the opacity and height, and then our measured height value is used to set the height when the answer is shown. (And of course, opacity is set to 1.)
Converted the faq-answer div into a react-spring animated.div element, and spread the values of animProps out into the styles prop.
Added a position: relative style to the answer's inner span tag. This is required by react-resize-aware to properly measure the element on load. (See next item.)
Added a resizeListener into our answer's inner span. This is part of react-resize-aware, and it measures the answer's height when loaded. (It's essentially an invisible div that returns its width and height via a custom React Hook... so it works perfectly in our stateless component!)

Go ahead and give it a try, if you haven't already. Each FAQ item should now animate open when clicked, and should animate back to closed if clicked again. Pretty cool, huh? You can now re-use this component in any of your sites, and you only need to edit the styles/animations to fit your needs.

Final Thoughts

We are finished! I hope that helps a few of you out there, and maybe even gives you some ideas to try on your own!

Preview/Download Source:

Demo here: https://stoutlabs-faqs-demo.netlify.com/

Demo Source on Github: https://github.com/stoutlabs/demo-spring-hooks.

I am planning to start writing more... so I'll catch you on the next post! 💜

My Docker Setup For GatsbyJS (and NextJS)

Daniel Stout — Wed, 06 Feb 2019 13:56:43 +0000

Update: Alpine made a couple changes that affect this post, and a helpful comment below will clear up the issue(s) caused from that. Thanks Jonathan! I've also fixed the example code.

Update #2: It seems that Hot Module Reloading is currently borked with this in Windows. I'll post an update if/when that is fixed!

Update #3: If you're still experiencing issues, another comment below might get you back on track: HERE

Docker is Fantastic

I'm probably late to the party on this one, but I recently started using Docker as a part of my development workflow. I absolutely love it, and I feel that all developers should at least tinker with a basic tutorial somewhere. Trust me, it's a rabbit hole worth exploring!

But... There Was a Minor Hitch

While going through a some of my recent Gatsby and NextJS projects this week to "Dockerize" them, I noticed that there didn't seem to be much information readily available for making that happen.

Gatsby does offer a Docker setup within their repo (based on alpine:edge), but to be blunt: it seemed needlessly complicated and vague, and I could not make it work for my purposes. (I think it's only meant to serve a site, post-build.)

So, I decided to figure out how to create a custom one from an official node:alpine (latest) image... just something to use for a quick dev environment setup regardless of which computer I'm using. (If I wanted to deploy somewhere other than Netlify, I could quickly add an Nginx image/service and a super basic conf file.)

Problem Solved!

After hours of learning, research, and experimenting (and possibly some frustration), I present you with my version of a working Dockerfile! It will create a fully functional Docker image that installs all the required packages in Apline Linux (latest) for building Gatsby (and NextJS) sites and apps.

(Note: For NextJS sites, I simply change the final CMD and the port(s) to whatever I'm using for the site/app... usually 8080.)

Dockerfile.dev

FROM node:alpine

# Also exposing VSCode debug ports
EXPOSE 8000 9929 9230

RUN \
  apk add --no-cache python make g++ && \
  apk add vips-dev fftw-dev --update-cache \
  --repository http://dl-3.alpinelinux.org/alpine/edge/community \
  --repository http://dl-3.alpinelinux.org/alpine/edge/main \
  && rm -fR /var/cache/apk/*

RUN npm install -g gatsby-cli

WORKDIR /app
COPY ./package.json .
RUN yarn install && yarn cache clean
COPY . .
CMD ["yarn", "develop", "-H", "0.0.0.0" ]

docker-compose.yml

(Note the setting of GATSBY_WEBPACK_PUBLICPATH - this seemed to fix any HMR issues I was having when editing code.)

version: '3'
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "8000:8000"
      - "9929:9929"
      - "9230:9230"
    volumes:
      - /app/node_modules
      - .:/app
    environment:
      - NODE_ENV=development
      - GATSBY_WEBPACK_PUBLICPATH=/

You'll probably want to throw a .dockerignore file into the project directory too, to ignore things like ./node_modules, ./cache, ./public, any .DS_Store files, etc. (Much like a .gitignore file.)

To run it, from the project's root directory run:

$ docker-compose up --build

After running that, I'm ready to work... whether I'm on my Macbook Pro or on my Windows desktop. Hopefully this helps you too!

Speed Tip: Use Typefaces.js in Gatsby to Locally Host Fonts

Daniel Stout — Wed, 22 Aug 2018 17:53:44 +0000

Since launching my new Gatsby-powered website, I noticed that there was only one thing still slowing down the load times: importing fontfaces via Google Fonts! Even though font files are usually relatively small, these imports cause an extra trip to Google's servers... and as a result, a tiny load-blocking delay occurs. (Especially on slow connections.)

Introducing Typefaces.js

Self-hosting fonts has always been a bit of a mess in the past, so most folks (including myself) resorted to just importing straight from Google Fonts... that's what they suggest, after all!

Thankfully, there's a more elegant JS soution available: the Typefaces.js package from Kyle Mathews. (Yes, one of the creators of Gatsby.) Assuming your site or app's build process uses Webpack with loaders for CSS and fonts, it's ridiculously easy to use. In my case, I wanted to use it in Gatsby...

Using Typefaces.js In Gatsby

This is all you have to do:

1. Locate the Typeface files on NPM for font(s) needed.

In my case, it was: Emily's Candy and Merriweather. Note: All of Google's fonts are available for this on NPM, as Kyle has programatically added them. (Font Squirrel's fonts are in the works too!)

2. Install the above files via yarn:

   yarn add typeface-merriweather typeface-emilys-candy

3. Remove the previous imports of those fonts.

(Mine were previously imported via an @import in my SCSS)

4. Add the following to `gatsby-browser.js`:

   require('typeface-emilys-candy');
   require('typeface-merriweather');

or, import in your top-level/layout component(s):

   import 'typeface-emilys-candy';
   import 'typeface-merriweather';

5. Do a fresh rebuild, and you're done!

The entire process took me around 2 minutes total time, and I shaved an additional ~500ms off my mobile load times in the process. If you haven't already done this on your Gatsby site, I highly recommend it!

Forem: Daniel Stout

Create an Animated FAQs Component with styled-components, react-spring, and React Hooks

Install Libraries

Create the Basic Component(s)

Faq.js

/src/components/Faqs/Faq.js

FaqsList.js

/src/components/Faqs/FaqsList.js

Styling With styled-components

/src/components/Faqs/faq-styles.js

Adjust the Components

/src/components/Faqs/Faq.js

/src/components/Faqs/FaqsList.js

Adding Animation With react-spring

/src/components/Faqs/Faq.js

Final Thoughts

Preview/Download Source:

My Docker Setup For GatsbyJS (and NextJS)

Docker is Fantastic

But... There Was a Minor Hitch

Problem Solved!

Dockerfile.dev

docker-compose.yml

Speed Tip: Use Typefaces.js in Gatsby to Locally Host Fonts

Introducing Typefaces.js

Using Typefaces.js In Gatsby

1. Locate the Typeface files on NPM for font(s) needed.

2. Install the above files via yarn:

3. Remove the previous imports of those fonts.

4. Add the following to gatsby-browser.js:

5. Do a fresh rebuild, and you're done!

4. Add the following to `gatsby-browser.js`: