A Sample RandomGif UI Component
This is a sample UI Component built using fractal-component to demonstrate its reusability.
To try it out, simply create a HTML file with the following content (also available on CodePen):
Counter Demo<!--Load `babel-standalone` to support JSX in script tag-->
You can also use it as ES6 module:
;;;;;const appContainer =reduxDevToolsDevOnly: false;ReactDOM;
API / Interface
- 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. e.g.
- styles: Can used to replace the built-in styling. Accepts JSS styling object
- 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
- REQUEST_NEW_GIF: Will attempt to get a random Gif 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.
<Random apiKey="xxxxxxxx" />