Skip to content

yakoue/react-email-builder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Yakoue Email Editor

Yakoue Email builder

Install

CDN

<script src="https://unpkg.com/@yakoue/react-email-builder"></script>

NPM

$ npm install @yakoue/react-email-builder --save
or
$ yarn @yakoue/react-email-builder

component

import React, { useRef } from 'react';
import { render } from 'react-dom'

import EmailBuilder from '@yakoue/react-email-builder';

const App = (props) => {

  const exportHtml = () => {
   this.instance.export();
  };

  const onLoad = (instance) => {
      this.instance=instance
       this.instance.addEvent('onExport', (data) => {
        console.log('exportHtml', data)
      })

      this.instance.setTemplate(`<mjml> 
<mj-body> 
    <mj-section> 
        <mj-column> 
            <mj-text>
                <h1> Hey Title! </h1> 
            </mj-text>
                <mj-button> Hi nestor! </mj-button>
        </mj-column>
    </mj-section>  
</mj-body> 
</mjml>`)
  };

  return (
    <div>
      <div>
        <button onClick={exportHtml}>Export HTML</button>
      </div>
      
      <EmailBuilder
        onLoad={onLoad}
      />
    </div>
  );
};

render(<App />, document.getElementById('app'))

Methods

Method Param description
setTemplate template Take the template and load it to the builder
saveTemplate Function callback Returns the design JSON and HTML in a callback function
exportHtml Function callback Returns the design HTML in a callback function

Properties

template object or string You can set MJML Json on MJML XML as string to this props

config object You can use this props to config and customize the builder

onLoad function callback You can use this to set call back function on builder load

Configuration Options


Attribute Required
brand
object
No This is the Brand Object from Yakoue. You can get it from the Brand settings page.
locale
string
No This is the locale you want to load the editor in. We have many translations available.
fusionTags
object
No This is an array of objects. You can pass the merge tags and special links to display in the editor.
token
string
No String token for authentication. It is required to enable user saved blocks.
tools
object
No These are the options for tools and custom tools.
blocks
object
No This is an array of objects. You can pass custom blocks here.
drows
object
No This is an array of objects. You can pass custom rows (sections) here.
body
object
No This objects to custom default template settings
editor
object
No These are some editor options for different functions of the editor.
fonts
object
No You can pass custom fonts here.
toolsDefaultValues
object
No You can pass default tools properties here.
callbacks
array
No Array of callbacks functions

Customize configuration

See Configuration Reference.

For any report please write to [email protected]

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published