A BuzzFeed-style quiz component for React.js

Demo

Check out the demo page here!

Installation

react-buzzfeed-quiz is available through Yarn:

yarn add react-buzzfeed-quiz

or through npm:

npm install react-buzzfeed-quiz

Once it's installed, you can import the BuzzFeedQuiz component as follows:

import { BuzzFeedQuiz } from "react-buzzfeed-quiz";

Custom Styles

If you'd like to import the default react-buzzfeed-quiz CSS styles, you can import them like so:

import "react-buzzfeed-quiz/lib/styles.css";

Fonts

react-buzzfeed-quiz does not provide any fonts, but some recommended fonts that are often found on BuzzFeed quizzes are:

• Proxima Nova
• Pathway Gothic One
• PT Serif

Example

Additional example can be found in the example directory. The package can be used as follows:

import ProfilePhoto from "./path/to/ProfilePhoto.jpg";
import BackgroundImage from "./path/to/BackgroundImage.jpg";
import FirstResultImage from "./path/to/FirstResultImage.jpg";
import SecondResultImage from "./path/to/SecondResultImage.jpg";
import ResponseImage from "./path/to/ResponseImage.jpg";
import { BuzzFeedQuiz } from "react-buzzfeed-quiz";
import "react-buzzfeed-quiz/lib/styles.css";

const App = () => {
  return (
    <BuzzFeedQuiz
      title={"Your title goes here."}
      description={"Your description goes here."}
      byline={true}
      bylineAuthor={"Your name"}
      bylineAuthorLink={"www.yourlink.com"}
      bylineAuthorLinkOpenInNewTab={true}
      bylineAuthorTagline={"Your author tagline goes here"}
      bylineAvatarImageSrc={ProfilePhoto}
      autoScroll={true}
      onRestart={() => alert("This alert was triggered by the onRestart prop!")}
      onResult={() => alert("The onResult prop triggered this alert!")}
      onAnswerSelection={(questionIndex, answerIndex, resultID) =>
        console.log({
          questionIndex,
          answerIndex,
          resultID,
        })
      }
      facebookShareButton={true}
      facebookShareLink={"www.yourlink.com"}
      twitterShareButton={true}
      twitterShareLink={"www.yourlink.com"}
      copyShareButton={true}
      copyShareLink={"This text was copied using the copyShareLink prop."}
      questions={[
        {
          question: "Here's a default question",
          answers: [
            {
              answer: "Answer one",
              resultID: 0,
            },
            {
              answer: "Answer two",
              resultID: 1,
            },
            {
              answer: "Answer three",
              resultID: 2,
            },
          ],
        },
        {
          question: "Let's add some background and font colors",
          backgroundColor: "rgb(211, 211, 211)",
          fontColor: "#000",
          answers: [
            {
              answer: "First answer",
              backgroundColor: "red",
              fontColor: "rgb(215, 215, 215)",
              resultID: 0,
            },
            {
              answer: "Second answer",
              backgroundColor: "orange",
              fontColor: "green",
              resultID: 1,
            },
            {
              answer: "Third answer",
              backgroundColor: "yellow",
              fontColor: "#000",
              resultID: 2,
              revealResponse: {
                 title: "Here's an answer response!",
                 description: "Here's a description for the answer response!",
                 image: ResponseImage,
                 imageAttribution: "Answer response image attribution text goes here",
              },
            },
          ],
        },
        {
          question: "Here is some overlapping image text",
          questionRelativeToImage: "overlap",
          imageAttribution: "Question image attribution text goes here",
          answerArrangement: "tile",
          backgroundImageSrc: BackgroundImage,
          answers: [
            {
              answer: "This answer has a background photo",
              resultID: 0,
              backgroundImageSrc: BackgroundImage,
              imageAttribution: "Answer photo attribution text goes here",
            },
            {
              answer: "Not this one, though",
              resultID: 1,
              backgroundColor: "rgb(238,243,247)",
              fontColor: "rgb(53,51,48)",
            },
            {
              answer: "Not this one, either",
              resultID: 2,
              backgroundColor: "rgb(238,243,247)",
              fontColor: "rgb(53,51,48)",
            },
          ],
        },
        {
          question: "Here is some adjacent image text",
          questionRelativeToImage: "adjacent",
          answerArrangement: "row",
          backgroundImageSrc: BackgroundImage,
          answers: [
            {
              answer: "Answer one",
              resultID: 0,
            },
            {
              answer: "Answer two",
              resultID: 1,
            },
            {
              answer: "Answer three",
              resultID: 2,
            },
          ],
        },
        {
          question: "Answers can also trigger a callback function",
          answers: [
            {
              answer: "This one does not trigger a function",
              resultID: 0,
            },
            {
              answer: "Click for answer function",
              onAnswerSelection: (questionIndex, answerIndex, resultID) =>
                alert("This alert is caused by an answer selection!"),
              resultID: 1,
            },
          ],
        },
      ]}
      results={[
        {
          title: "Your first result title goes here",
          description: "Your first result description goes here",
          resultImageSrc: FirstResultImage,
          imageAttribution: "Your photo attribution text goes here",
          resultID: 0,
        },
        {
          title: "Your second result title goes here",
          description: "Your second result description goes here",
          resultImageSrc: SecondResultImage,
          resultID: 1,
        },
        {
          title: "Your third result title goes here",
          description: "Result images and attributions are optional!",
          resultID: 2,
        },
      ]}
    />
  );
};

Disclaimer

react-buzzfeed-quiz is not affiliated, associated, authorized, endorsed by, or in any way officially connected with BuzzFeed, Inc., or any of its subsidiaries or its affiliates. The official BuzzFeed, Inc. website can be found at https://www.buzzfeed.com.

The name BuzzFeed as well as related names, marks, emblems/logos, and images are registered trademarks of BuzzFeed, Inc.

User Guide

API

The BuzzFeedQuiz component accepts the following props:

Question Object

BuzzFeedQuiz's questions prop accepts an array of question objects with key-value pairs formatted in the following manner:

Answer Object

The value of the answers key of the Question Object accepts an array of answer objects with key-value pairs formatted in the following manner:

Response Object

BuzzFeedQuiz's Answer Objects accept an optional revealResponse key object with key-value pairs formatted in the following manner:

Result Object

BuzzFeedQuiz's results prop accepts an array of result objects with key-value pairs formatted in the following manner:

Contributing

Contributions are welcome!

1. Fork the project.
2. Create your feature branch (git checkout -b feature/MyFeature).
3. Commit your changes (git commit -m 'Add my feature').
4. Push to the branch (git push origin feature/MyFeature).
5. Open a pull request.

License

Distributed under the MIT License. See LICENSE.txt for more information.