TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

A Sample RandomGifPairPair UI Component

npm version unpkg npm bundle size (minified + gzip)


This is a sample UI Component built using fractal-component to demonstrate its reusability. It's built using two RandomGifPair components.

Quick Start

To try it out, simply create a HTML file with the following content (also available on CodePen):

<!DOCTYPE html>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>RandomGifPairPair Demo</title>
        Load `babel-standalone` to support JSX in script tag
        <script src="https://unpkg.com/@babel/standalone@^7.0.0/babel.min.js"></script>
        <script src="https://unpkg.com/react@~16.8.0/umd/react.production.min.js"></script>
        <script src="https://unpkg.com/prop-types@~15.6.2/prop-types.min.js"></script>
        <script src="https://unpkg.com/react-dom@~16.8.0/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/redux-saga@~1.0.0/dist/redux-saga.umd.min.js"></script>
        <script src="https://unpkg.com/fractal-component@latest/dist/fractal-component.min.umd.js"></script>
        <script src="https://unpkg.com/jss@9.8.7/dist/jss.min.js"></script>
        <script src="https://unpkg.com/jss-preset-default@4.5.0/dist/jss-preset-default.min.js"></script>
        <script src="https://unpkg.com/@fractal-components/random-gif@latest/dist/@fractal-components/random-gif.min.umd.js"></script>
        <script src="https://unpkg.com/@fractal-components/random-gif-pair@latest/dist/@fractal-components/random-gif-pair.min.umd.js"></script>
        <script src="https://unpkg.com/@fractal-components/random-gif-pair-pair@latest/dist/@fractal-components/random-gif-pair-pair.min.umd.js"></script>
        <div id="app_root"></div>
        <script type="text/babel">
            const appContainer = new FractalComponent.AppContainer({
                reduxDevToolsDevOnly: false
                    <RandomGifPairPair.default />

You can also use it as ES6 module:

import "@babel/polyfill";

import React from "react";
import ReactDOM from "react-dom";

import { AppContainer, AppContainerContext } from "fractal-component";
import RandomGifPairPair, { actions, actionTypes } from "@fractal-components/random-gif-pair-pair";

const appContainer = new AppContainer({
    reduxDevToolsDevOnly: false

    <AppContainerContext.Provider value={appContainer}>
        <RandomGifPairPair />

API / Interface

Component Properties

  • namespacePrefix: String. Optional. Used to extend component's namespace (without impact component's internal namespace) so that two components' namespaces have a common part. It will impact the action multicast dispatch.
  • apiKey: Giphy.com API key. If not set, default one will be used
  • showButton: Boolean. Whether a click button should be shown. You will want to hide the button when you reuse this component to create a new component.
  • styles: Can used to replace the built-in styling. Accepts JSS styling object

Action Interface

Outgoing Actions

  • NEW_GIF: Send out when a new gif url has been retrieved from Giphy.com
  • LOADING_START: Send out when loading is started
  • LOADING_COMPLETE: Send out when loading is completed

Accepted Actions

  • REQUEST_NEW_PAIR_PAIR: Will attempt to get two pairs of random Gifs from Giphy.com when receive this action

Giphy.com API key

This comes with a testing Giphy.com API key in order to retrieve random Gifs from https://giphy.com/. The api key is limted to 40 requests per hour.

You can create your own API key from https://developers.giphy.com/ and set the API key by api property. e.g.

<RandomPairPair apiKey="xxxxxxxx" />

Package Sidebar


npm i @fractal-components/random-gif-pair-pair

Weekly Downloads






Unpacked Size

540 kB

Total Files


Last publish


  • t83714