New Features and Fixes

.circleci/config.yml

@@ -0,0 +1,39 @@
+# Javascript Node CircleCI 2.0 configuration file
+#
+# Check https://circleci.com/docs/2.0/language-javascript/ for more details
+#
+version: 2
+jobs:
+  build:
+    docker:
+      # specify the version you desire here
+      - image: circleci/node:8.11-browsers
+
+      # Specify service dependencies here if necessary
+      # CircleCI maintains a library of pre-built images
+      # documented at https://circleci.com/docs/2.0/circleci-images/
+      # - image: circleci/mongo:3.4.4
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+          - v1-dependencies-{{ checksum "package.json" }}
+          # fallback to using the latest cache if no exact match is found
+          - v1-dependencies-
+
+      - run: yarn install
+
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}
+
+      # run tests!
+      - run: yarn test
+
+

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-.DS_Store
+.DS_Store
+.idea

README.md

@@ -1,21 +1,22 @@
-# react-giphy-picker
+# React GIPHY Component
+A simple gif picker component for React using GIPHY API
 
-[![npm version](https://badge.fury.io/js/react-giphy-picker.svg)](https://badge.fury.io/js/react-giphy-picker)
+[![npm version](https://badge.fury.io/js/react-giphy-component.svg)](https://badge.fury.io/js/react-giphy-component)
 
-![](https://raw.githubusercontent.com/StevenIseki/react-giphy-picker/master/example/screenshot.gif)
-
-react-giphy-picker is a simple gif picker component using giphy API
-
-On select it returns a Gif object in the format specified for an image from Giphy's search API [giphy sample-response-search](https://github.com/Giphy/GiphyAPI#sample-response-search)
+![](https://github.com/arjunkomath/react-giphy-picker/blob/master/example/screenshot.gif?raw=true)
 
 ## Install
 
-`npm install react-giphy-picker --save`
+NPM -
+`npm i react-giphy-component --save`
+
+Yarn -
+`yarn add react-giphy-component`
 
 ## Usage basic
 
 ```jsx
-import Picker from 'react-giphy-picker'
+import Picker from 'react-giphy-component'
 import ReactDOM from 'react-dom'
 import React, { Component, PropTypes } from 'react'
 
@@ -42,7 +43,7 @@ ReactDOM.render(
 ## Props
 
 #### `onSelected` (required)
-Handler returns the emoji character selected from the emoji picker.
+Handler returns the GIF selected from the picker. On select it returns a Gif object in the format specified for an image from Giphy's search API [giphy sample-response-search](https://github.com/Giphy/GiphyAPI#sample-response-search)
 
 #### `visible`
 Opacity to show or hide the picker. Defaults to `true`.
@@ -52,6 +53,30 @@ If you want the emoji picker to be a modal.
 `true` will set the wrapper as `position: absolute`.
 Or `false`, which is the default will be `position: static`.
 
+#### `apiKey`
+GIPHY API key, you can get one from https://developers.giphy.com/
+
+#### `loader`
+A custom loader react component that will be showing while performing API calls
+
+#### `placeholder`
+Input plave holder text
+
+#### `imagePlaceholderColor`
+Placeholder background color while rendering GIF images
+
+#### `className`
+CSS class name for GIPHY wrapper
+
+#### `inputClassName`
+CSS class name for seach keyword input
+
+#### `gifClassName`
+CSS class name for GIF image
+
+#### `children`
+Child react components
+
 ## Styles
 Uses styled-components 💅 for the base styling.
 
@@ -62,8 +87,4 @@ npm install
 npm run build
 npm test
 npm start
-```
-
-## License
-
-[MIT](http://isekivacenz.mit-license.org/)
+```

example/example.js

@@ -3,46 +3,42 @@ import ReactDOM from 'react-dom'
 import React, { Component, PropTypes } from 'react'
 
 class TestComponent extends Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      enteredGif: '',
-      visible: true
-    }
-  }
+	constructor (props) {
+		super(props)
+		this.state = {
+			enteredGif: ''
+		}
+	}
 
-  log (gif) {
-    console.log(gif)
-    this.setState({enteredGif: gif})
-  }
+	log (gif) {
+		console.log(gif)
+		this.setState({enteredGif: gif})
+	}
 
-  toggleVisible () {
-    this.setState({visible: !this.state.visible})
-  }
+	renderLoader() {
+		return (<p style={{textAlign: 'center'}}>Loading...</p>)
+	}
 
-  render () {
-    const {enteredGif, visible} = this.state
-    let url = ''
-    if (enteredGif.fixed_width !== undefined) {
-      url = enteredGif.fixed_width.url
-    }
-    return (
-      <div>
-        <div style={{paddingBottom: '2rem'}}>
-          <Picker
-            onSelected={::this.log}
-            visible={visible}
-            modal={false}
-            />
-        </div>
-        <button onClick={::this.toggleVisible}>toggle giphy picker</button>
-        <img src={url} />
-      </div>
-    )
-  }
+	render () {
+		const {enteredGif} = this.state
+		let url = ''
+		if (enteredGif.fixed_width !== undefined) {
+			url = enteredGif.fixed_width.url
+		}
+		return (
+			<div>
+				<Picker
+					onSelected={::this.log}
+					modal={false}
+					loader={this.renderLoader()}
+				/>
+				<img src={url} />
+			</div>
+		)
+	}
 }
 
 ReactDOM.render(
-  <TestComponent />,
-  document.getElementById('root')
+	<TestComponent />,
+	document.getElementById('root')
 )