react-newsletter

Edit newsletters in your React application

Install

npm install --save react-newsletter

Docs / API reference

Available components:

• ReactNewsletterProvider
  • Injects HTML5 DnD Backend support
• TemplateComponent
  • Items you will be able to drag and drop
  • Based on ReactDND.DragSource
• ReactNewsletter
  • The canvas contains Droppable areas and dropped items
• 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