open-index/open-npm huggingface dataset:
npm package: @joegesualdo/react-draggable
Description: Make elements draggable.
Author: Joe Gesualdo
Latest version: 0.0.7

## react-draggable [![Build Status](https://travis-ci.org/joegesualdo/react-draggable.svg?branch=master)](https://travis-ci.org/joegesualdo/react-draggable)
> A React component to make elements draggable.

## Install
```
$ npm install --save @joegesualdo/react-draggable
```

![react-draggable-demo](https://github.com/joegesualdo/react-draggable/raw/master/demo.gif)

## Usage
```javascript
import Draggable from '@joegesualdo/react-draggable';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <div style={{width: 1000, height: 1000}}>
    <Draggable
      axis='both'
      defaultPosition={{x: 0, y:0}}
      onDrag={function(e){console.log(e)}}
      onStart={function(){console.log('started')}}
      onStop={function(){console.log('stopped')}}
    >
      // The element you want to make draggable
      <div style={{backgroundColor: 'blue', width: 100, height: 60}}>
        Woo!
      </div>
    </Draggable>
  </div>,
  document.querySelector('#app')
)
```

## Test
```
$ npm test
```
## Build
```
$ npm run build
```

## License
MIT © [Joe Gesualdo]()
npm package: @joegesualdo/react-range-slider
Description: A range slider implemented in React
Author: Joe Gesualdo
Latest version: 0.0.2

## react-range-slider [![Build Status](https://travis-ci.org/joegesualdo/react-range-slider.svg?branch=master)](https://travis-ci.org/joegesualdo/react-range-slider)
> A range slider implemented in React

## Install
```
$ npm install --save @joegesualdo/react-range-slider
```

![react-range-slider-demo](https://github.com/joegesualdo/react-range-slider/raw/master/demo.gif)

## Usage
```javascript
import RangeSlider from '@joegesualdo/react/range-slider'

<RangeSlider
  width={300}
  lineColor='blue'
  leftColor='black'
  maxPosition={20}
  minPosition={60}
  rightColor='black'
  onStart={function(){console.log("Started!!!")}}
  onStop={function(){console.log("Stop!!!")}}
  onSlideMin ={function(pos){console.log(pos)}}
  onSlideMax ={function(pos){console.log(pos)}}
>
  <div style={
    {
      border: '1px solid #aaa',
      background: '#fff',
      borderRadius: '100%',
      boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
      cursor: 'pointer',
      height: 24,
      outline: 'none',
      width: 24,
    }
  }></div>
</RangeSlider>
```

## Test
```
$ npm test
```
## Build
```
$ npm run build
```

## Related
- [react-slider](https://github.com/joegesualdo/react-slider) - A slider

## License
MIT © [Joe Gesualdo]()
npm package: @joegesualdo/react-server
Description: Quickly start react server.
Author: Joe Gesualdo
Latest version: 0.0.1

## react-server [![Build Status](https://travis-ci.org/joegesualdo/react-server.svg?branch=master)](https://travis-ci.org/joegesualdo/react-server)
> Quickly start react server.

## Install
```
$ npm install --save @joegesualdo/react-server
```

## Usage
```javascript
import ReactServer from "@joegesualdo/reactServer"
let server = new ReactServer();

server.start("./index.jsx", 'bundle.js');
```

## API
### `ReactServer()`
> Creates an instance of the server

```javascript
import ReactServer from "@joegesualdo/reactServer"
let server = new ReactServer();

server.start("./index.jsx", 'bundle.js');
```
### `reactServer.start(entryFilePath, ouputPath, host, port)`
> Starts the server

| Name | Type | Description |
|------|------|-------------|
| entryFilePath | `String` | Path to the entry file |
| outputPath| `String` | The path where you want the code to be rendered |
| host | `String` | The host that you want the server to run on (Default: `localhost`)|
| port| `Number` | The port you want the server to run on |

# Viewing in the browser
#### Create HTML file
```
$ touch index.html
```

#### Start Server
```javascript
import ReactServer from "@joegesualdo/reactServer"
let server = new ReactServer();

server.start("./index.jsx", 'assets/bundle.js');
```

#### Reference the server and output file in your HTML file
```html
<html>
  <body>
    ...
    <script src="http://localhost:8080/assets/bundle.js"></script>
  </body>
</html>
```
> NOTE: Make sure host, port, and outputFile match what was passed to `.createServer(...)`

#### Find and View the HTML file
Visit [http://localhost:8080](http://localhost:8080) 
> NOTE: Make sure host and port are the ones specified when creating the server

An interactive file system will appear. Navigate to the location of the .html file

## Test
```
$ npm test
```
## Build
```
$ npm run build
```

## License
MIT © [Joe Gesualdo]()
npm package: @joegesualdo/react-server-cli
Description: Quickly start a react server.
Author: Joe Gesualdo
Latest version: 0.0.2

## react-server-cli [![Build Status](https://travis-ci.org/joegesualdo/react-server-cli.svg?branch=master)](https://travis-ci.org/joegesualdo/react-server-cli)
> Quickly start a react server.

## Install
```
$ npm install --global @joegesualdo/react-server-cli 
```

## Usage
```javascript
$ react-server --entry=./index.jsx --output=assets/bundle.js
```

## Test
```
$ npm test
```
## Build
```
$ npm run build
```

## Related
- [example-package]() - Add description of the example package here.

## License
MIT © [Joe Gesualdo]()
npm package: @joegesualdo/react-slider
Description: A slider implemented in React.
Author: Joe Gesualdo
Latest version: 0.0.3

## react-slider [![Build Status](https://travis-ci.org/joegesualdo/react-slider.svg?branch=master)](https://travis-ci.org/joegesualdo/react-slider)
> A slider implemented in React.

## Install
```
$ npm install --save @joegesualdo/react-slider 
```

![react-slider-demo](https://github.com/joegesualdo/react-slider/raw/master/demo.gif)

## Usage
```javascript
import Slider from '@joegesualdo/react-slider'

<Slider
  width={300}
  position={30}
  onSlide={function(pos){console.log(pos)}}
  onStart={function(){console.log("Started!!!")}}
  onStop={function(){console.log("Stop!!!")}}
>
  <div style={
    {
      border: '1px solid #aaa',
      background: '#fff',
      borderRadius: '100%',
      boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
      cursor: 'pointer',
      height: 24,
      outline: 'none',
      width: 24,
    }
  }></div>
</Slider>
```

## Test
```
$ npm test
```
## Build
```
$ npm run build
```

## Related
- [react-range-slider](https://github.com/joegesualdo/react-range-slider) - A slider for selecting a range (min & max).

## License
MIT © [Joe Gesualdo]()
npm package: @joegesualdo/strip-keys-with-empty-values
Description: Strip an objects keys with empty values.
Author: Joe Gesualdo
Latest version: 0.0.1

## @joegesualdo/strip-keys-with-empty-values [![Build Status](https://travis-ci.org/joegesualdo/strip-keys-with-empty-values-js.svg?branch=master)](https://travis-ci.org/joegesualdo/strip-keys-with-empty-values-js)
> Strip an object's keys with empty values. Supports nested objects.

## Install
```
$ npm install --save @joegesualdo/strip-keys-with-empty-values
```

## Usage
```javascript
import stripKeysWithEmptyValues from "@joegesualdo/strip-keys-with-empty-values"

let obj = {
  name: 'joe',
  age: '',
  job: {
    title: 'cool',
    hours: ''
  }
}

stripKeysWithEmptyValues(obj, true)
//=> {
//     name: 'joe',
//     job: {
//       title: 'cool'
//     }
//   }
```

## API
### `stripKeysWithEmptyValues(obj, nested)`
> Strips the keys with empty values. Support nested objects.

| Name | Type | Description |
|------|------|-------------|
| obj | `Object` | The object you want to strip |
| nested | `Boolean` | Should the keys of nested objects be stripped?|

Returns: `Object`, that represents the obj provided but with the empty keys stripped.

```javascript
import stripKeysWithEmptyValues from "@joegesualdo/strip-keys-with-empty-values"

let obj = {
  name: 'joe',
  age: '',
  job: {
    title: 'cool',
    hours: ''
  }
}

stripKeysWithEmptyValues(obj, true)
//=> {
//     name: 'joe',
//     job: {
//       title: 'cool'
//     }
//   }
```

## Test
```
$ npm test
```
## Build
```
$ npm run build
```

## License
MIT © [Joe Gesualdo]()
npm package: @joegesualdo/terminal-log
Description: Pretty terminal logging.
Author: Joe Gesualdo
Latest version: 0.0.6

## terminal-log [![Build Status](https://travis-ci.org/joegesualdo/terminal-log-node.svg?branch=master)](https://travis-ci.org/joegesualdo/terminal-log-node)
> Pretty terminal logging.

## Install
```
$ npm install --save @joegesualdo/terminal-log 
```

![example](https://raw.github.com/joegesualdo/terminal-log-node/master/example.png)
## Usage
```javascript
import log from ('@joegesualdo/terminal-log')

log.warn("Warn")
log.error("Error")
log.success("Success")
```

## Test
```
$ npm test
```
## API
### `warn(message)`

| Name | Type | Description |
|------|------|-------------|
| message | `String` | Message |

```javascript
import log from ('@joegesualdo/terminal-log')

log.warn("Warn")
```

### `error(message)`

| Name | Type | Description |
|------|------|-------------|
| message | `String` | Message |

```javascript
import log from ('@joegesualdo/terminal-log')

log.error("Error")
```

### `success(message)`

| Name | Type | Description |
|------|------|-------------|
| message | `String` | Message |

```javascript
import log from ('@joegesualdo/terminal-log')

log.success("Success")
```

## Build
```
$ npm run build
```

## License
MIT © [Joe Gesualdo]()