# react-newsletter

> Edit newsletters in your React application

Latest version **1.1.3** (published 2019-07-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-newsletter
pnpm add react-newsletter
yarn add react-newsletter
bun add react-newsletter
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2019-07-28 |
| First published | 2018-06-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 521.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Webscope.io |
| Maintainers | vorcak |

## Links

- npm: https://www.npmjs.com/package/react-newsletter
- Repository: https://github.com/webscopeio/react-newsletter
- Homepage: https://github.com/webscopeio/react-newsletter#readme
- Issues: https://github.com/webscopeio/react-newsletter/issues
- npm.io page: https://npm.io/package/react-newsletter

## Dependencies (9)

- [flow-bin](https://npm.io/package/flow-bin.md) 0.72.0
- [react-dnd](https://npm.io/package/react-dnd.md) 2.6.0
- [classnames](https://npm.io/package/classnames.md) 2.2.5
- [flow-watch](https://npm.io/package/flow-watch.md) 1.1.3
- [prop-types](https://npm.io/package/prop-types.md) 15.6.1
- [immutability-helper](https://npm.io/package/immutability-helper.md) 2.7.0
- [react-dnd-html5-backend](https://npm.io/package/react-dnd-html5-backend.md) 2.6.0
- [@webscopeio/eslint-config](https://npm.io/package/@webscopeio/eslint-config.md) 1.0.2
- [@webscopeio/react-markdown-editor](https://npm.io/package/@webscopeio/react-markdown-editor.md) 1.0.3

## Recent versions

- 1.1.3 (latest) — 2019-07-28
- 1.1.2 — 2019-07-26
- 1.1.1 — 2019-07-26
- 1.1.0 — 2019-07-16
- 1.0.6 — 2018-11-05
- 1.0.5 — 2018-11-04
- 1.0.4 — 2018-09-13
- 1.0.3 — 2018-06-07
- 1.0.2 — 2018-06-05
- 1.0.1 — 2018-06-05

## README

# react-newsletter

> Edit newsletters in your React application

## Install

```bash
npm install --save react-newsletter
```

# Docs / API reference
## Available components:
 - [ReactNewsletterProvider](#reactnewsletterprovider)
   - Injects HTML5 DnD Backend support
 - [TemplateComponent](#templatecomponent)
   - Items you will be able to drag and drop
   - Based on ReactDND.DragSource
 - [ReactNewsletter](#reactnewsletter)
   - The canvas contains Droppable areas and dropped items
 - [CardDragLayer](#carddraglayer)
   - Element appearence while dragging
   - Based on ReactDND.DragLayer

## Props:

### ReactNewsletterProvider
Just wrap you root component with it
### TemplateComponent
 - `type: string`: a type of yout item
 - `initialValue: any`: initial value
 - `className?: string`: classes pushed to the root JSX element (div) of the TemplateComponent
 - `style?: Object`: style pushed to the root JSX element (div) of the TemplateComponent
 - `allSelectedItems?: Array<{type: string, value: any}>`: provides an opportuinity to drag and drop several selected items
### ReactNewsletter
 - `items: Array<Item>`: dropped items
   - Item
     - `id: number`
     - `value: string`
     - `type: string`
     - `staticTemplate?: boolean`: `true` to forbid to an item be draggable
     - `shouldNotRenderDNDAreaBefore?: boolean`
 - `itemsOnChange: (Array<Item>) => void`: changes handler
 - `templates: Array<Template>`: your templates
   - Template:
     - `name: string`
     - `type: string`
     - `component`: React component
     - `initialValue: any`
     - `getHTML: () => string`
 - `onDroppedCallback?: () => void`: called right after an item has been dropped
### CardDragLayer
 - `component`: React component
 - `item: Item`
 - `moveableDragLayerStyles`: wrapper style of all items being dragged
 - `dragLayerItemStyles`: style of a single item which is being dragged

## Meta
### To debug locally
 - `yarn start` here in the root
 - go to your project and run `npm link $PATH_TO/react-newsletter`

### To update and publish changes
 - `npm version <update_type>` (semver)
 - `npm publish`


### Have questions?
Welcome to issues or contact @alienalein13

### TODO
 - Types (migrate to TS probably)
 - Tests
 - Implement getHTML function for the whole newsletter

## License

MIT © [Webscope.io](https://github.com/webscopeio)

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