# draft-js-divider-plugin

> Divider Plugin for DraftJS

Latest version **0.2.1** (published 2017-11-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install draft-js-divider-plugin
pnpm add draft-js-divider-plugin
yarn add draft-js-divider-plugin
bun add draft-js-divider-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2017-11-15 |
| First published | 2017-10-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Ilkwon Sim |
| Maintainers | simsim0709 |
| Keywords | editor, wysiwyg, draft, react, ux, components, widget, link, react-component |

## Links

- npm: https://www.npmjs.com/package/draft-js-divider-plugin
- Repository: https://github.com/simsim0709/draft-js-plugins
- Homepage: https://github.com/simsim0709/draft-js-plugins#readme
- Issues: https://github.com/simsim0709/draft-js-plugins/issues
- npm.io page: https://npm.io/package/draft-js-divider-plugin

## Dependencies (3)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8
- [union-class-names](https://npm.io/package/union-class-names.md) ^1.0.0
- [decorate-component-with-props](https://npm.io/package/decorate-component-with-props.md) ^1.0.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.2.1 (latest) — 2017-11-15
- 0.2.0 — 2017-11-02
- 0.1.1 — 2017-10-26
- 0.1.0 — 2017-10-26

## README

# DraftJS Divider Plugin

*This is a plugin for the `draft-js-plugins-editor`.*

## Usage

```js
import createDividerPlugin from 'draft-js-divider-plugin';

const dividerPlugin = createDividerPlugin();
```

It exposes `addDivider` function and `DividerButton`.

You can use this plugin like below.

```js
/* eslint-disable  */

import React, { Component } from 'react';

import 'draft-js/dist/Draft.css';

import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor';

import createSideToolbarPlugin from 'draft-js-side-toolbar-plugin';
import BlockTypeSelect from 'draft-js-side-toolbar-plugin/lib/components/BlockTypeSelect';
import 'draft-js-side-toolbar-plugin/lib/plugin.css';

import createDividerPlugin from 'draft-js-divider-plugin';
import 'draft-js-divider-plugin/lib/plugin.css';

const dividerPlugin = createDividerPlugin();

const DefaultBlockTypeSelect = ({ getEditorState, setEditorState, theme }) => (
  <BlockTypeSelect
    getEditorState={getEditorState}
    setEditorState={setEditorState}
    theme={theme}
    structure={[dividerPlugin.DividerButton]}
  />
);

const sideToolbarPlugin = createSideToolbarPlugin({
  structure: [DefaultBlockTypeSelect],
});

import './Editor.css';

const plugins = [sideToolbarPlugin, dividerPlugin];
const { SideToolbar } = sideToolbarPlugin;

class CustomEditor extends Component {
  state = {
    editorState: createEditorStateWithText(''),
  };

  onChange = editorState => {
    this.setState({
      editorState,
    });
  };

  render() {
    return (
      <div className="App">
        <div className="editor">
          <Editor
            placeholder="placeholder ..."
            readOnly={false}
            editorState={this.state.editorState}
            onChange={this.onChange}
            plugins={plugins}
            ref={element => {
              this.editor = element;
            }}
          />

          <SideToolbar />
        </div>
      </div>
    );
  }
}

export default CustomEditor;
```

### Importing the default styles

The plugin ships with a default styling available at this location in the installed package:
`draft-js-divider-plugin/lib/plugin.css`.

If you want to use the default styles, you can include this stylesheet.
Otherwise you can supply your own styles via the `theme` config option.

---
_Source: https://npm.io/package/draft-js-divider-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._