Need private packages and team management tools?Check out npm Orgs. »


1.1.1 • Public • Published

A Sample RandomGif UI Component

npm version unpkg npm bundle size (minified + gzip)


This is a sample UI Component built using fractal-component to demonstrate its reusability.

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>Counter Demo</title>
            Load `babel-standalone` to support JSX in script tag
        <script src="^7.0.0/babel.min.js"></script> 
        <script src=""></script> 
        <script src=""></script> 
        <script src=""></script> 
        <script src=""></script> 
        <script src=""></script> 
        <script src=""></script> 
        <script src=""></script> 
        <script src=""></script> 
        <div id="app_root"></div>
        <script type="text/babel">
            const appContainer = new FractalComponent.AppContainer({
                reduxDevToolsDevOnly: false
                    <RandomGif.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 RandomGif, { actions, actionTypes } from "@fractal-components/random-gif";
const appContainer = new AppContainer({
    reduxDevToolsDevOnly: false
    <AppContainerContext.Provider value={appContainer}>
        <RandomGif />

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: 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. e.g. RandomGifPair
  • 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
  • LOADING_START: Send out when loading is started
  • LOADING_COMPLETE: Send out when loading is completed

Accepted Actions

  • REQUEST_NEW_GIF: Will attempt to get a random Gif from when receive this action API key

This comes with a testing API key in order to retrieve random Gifs from The api key is limted to 40 requests per hour.

You can create your own API key from and set the API key by api property. e.g.

<Random apiKey="xxxxxxxx" />


npm i @fractal-components/random-gif

Downloadsweekly downloads









last publish


  • avatar
Report a vulnerability