open-index/open-npm huggingface dataset:
npm package: @synapsestudios/draftjs-editor
Description: A customized WYSIWYG editor utilizing Facebook's Draft.js library
Author: Synapse Studios
Latest version: 4.0.0

# [@synapsestudios/draftjs-editor](https://synapsestudios.github.io/draftjs-editor/)

A simple WYSIWYG text editor utilizing Facebook's Draft.js library– customized by Synapse Studios

[![npm version](https://img.shields.io/npm/v/@synapsestudios/draftjs-editor.svg?style=flat)](https://www.npmjs.com/package/@synapsestudios/draftjs-editor)

## Demo

A demo is available at [https://synapsestudios.github.io/draftjs-editor/](https://synapsestudios.github.io/draftjs-editor/)

## Usage

#### Installing via CLI
```js
// yarn
yarn add @synapsestudios/draftjs-editor

// npm
npm install --save @synapsestudios/draftjs-editor
```

#### Importing JS
The default export is the React editor component itself:
```js
import SynapseDraft from '@synapsestudios/draftjs-editor';
```

It also exports the following utilities:
* `DraftJSEditor` - The default React component  
* `Renderer(customBlocks)` - A constructor that creates a new Draft to HTML renderer, currently only exposes the method `convertRawToHTML(rawContent)`
* `defaultBlocks` - A default set of blocks to pass into the Renderer, these can be used or overridden in your own project as well
* `convertFromRaw()` - Simple passthrough of DraftJS's `convertFromRaw` utility

#### Importing CSS
```js
// Minified, autoprefixed css
import '@synapsestudios/draftjs-editor/lib/draftjs-editor.min.css';

// Not-minified, not-autoprefixed css
import '@synapsestudios/draftjs-editor/lib/draftjs-editor.css';
```

#### Styling 
The two main component classNames are `DraftJSEditor-root` for the container and `DraftJSEditor-editor` for the editor itself.

If you are using Stylus you can import the .styl file into your build:
```styl
@import '@synapsestudios/draftjs-editor/lib/draftjs-editor.styl';
```

## API

### `Props`
Props are automatically passed onto the DraftJS Editor component.  Anything usable from the api can also be passed into DraftJSEditor.

* `containerStyle` (object) - passes inline styling directly into the parent component of the editor.  This can also be modified by using CSS to style the class name `DraftJSEditor-root`
* `className` (string) - Classes to add to the editor component
* `id` (string) - ID to add to the editor component
* `customBlocks` (object) - An object containing the custom blocks you want the editor to render, see `defaultBlocks` for examples
* `customBlockControls` (array) - An array of keys of custom blocks to render the controls for

### `Renderer` Methods
* `convertRawToHTML(rawContent)` - Takes raw DraftJS state object and renders it to HTML

## Contributing

To run the project on your own computer:
* Clone this repository
* `yarn install` or `npm install`
* `yarn run storybook` or `npm run storybook`
* Visit http://localhost:5000/
* Changes made to files in the `src` directory should immediately compile and be visible in your browser.
npm package: @synapsestudios/react-autocomplete
Description: React Autocomplete
Author: Synapse Studios
Latest version: 1.0.1

React Autocomplete - [View Demo](http://synapsestudios.github.io/react-autocomplete/)
----
A lightweight autocomplete input component

### Install
`npm install --save synapse-react-autocomplete`

### Usage
`import Autocomplete from 'synapse-react-autocomplete';`

### Props
```
className : string
id : 'string'
labelField : 'string' (default 'label')
valueField : 'string' (default 'value')(optional)
options : [{ labelField : 'string', valueField : 'string' }]
placeholder : 'string'
minimumCharacters : number
maximumCharacters : number
maximumSuggestions : number
clearOnSelect : bool
dropdownPosition : string ('top' or 'bottom')
dropdownHeight : number
showSuggestionsOnEmptyFocus : bool
```

### Styles
Styles are not included by default. Include `scss/autocomplete.scss` in your local app.scss file to include the base styles.

### Development
* Development - `npm run demo`
* Distribution - `npm run build`