Uhuu Docs

Appearance

Two-way Communication with Uhuu SDK ​

Share information back and forth between template and uhuu editor using Uhuu SDK.
Here are some examples of React code snippets and concepts to help you get started:

Basic ​

Request uhuu editor to show an edit dialog using global $uhuu object.

js
// React Props and Component Composition:
const Sample = (props) => {
  return (
    // Show an edit dialog (in uhuu editor) and save changes to 'title' path.
    <div onClick={()=>$uhuu.editDialog({path: 'title'})}>{props.title}</div>
  );
}

When users save changes in the edit dialog, the uhuu editor merges the modifications into the existing payload and then emits new data using payload event.

js
$uhuu.listen('payload', (data) => {
    // Received new payload data from uhuu editor.    
    console.log(data.title); // new title 
});

Paged.js Example ​

When you're rendering HTML with React and building pagination using Paged.js, you might encounter a situation where your elements lose their click handlers.

In this case, we recommend associating 'editDialog' parameters with a 'data-uhuu' attribute on the respective elements, afterwards selecting those elements using the [data-uhuu] selector. For example:

html
<div data-uhuu={ JSON.stringify({path: 'title'})}>{title}</div>

Following code snippet sets up click event listeners on elements with the data-uhuu attribute and, when clicked, extracts data from this attribute and uses it as an argument for the $uhuu.editDialog function. This enables dialog-based interaction for editing.

js
// After paged.js preview render
// Listen clicks to elements with "data-uhuu" attribute
document.querySelectorAll("[data-uhuu]").forEach(item => {
    item.addEventListener('click', function() {
      let jsonString = this.getAttribute("data-uhuu");
      let value = JSON.parse(jsonString);
      $uhuu.editDialog(value);
    });
})

Developers can add dialog interaction indicators using the following CSS in template.

css
@media screen {
  [data-uhuu] { @apply cursor-pointer hover:outline outline-[#ff44cc] hover:outline-dashed hover:rounded relative; }
  [data-uhuu]:before {
      content: ' ';
      @apply absolute w-4 h-4 bg-[#ff44cc] rounded-t-full rounded-r-full top-0 ml-1 mt-1 opacity-20 transition;
  }
  [data-uhuu]:hover:before { @apply opacity-100 transition; }
}

This CSS rule can be applied to create visual cues or indicators for dialog interactions in uhuu templates.

Show hover indicators only on screen.

CSS is defined in @media screen { ... } so hover indicators will be hidden while creating PDF.