https://github.com/ExWeiv/wix-ce-helpers

Custom element helpers for Wix powered websites/web apps
https://github.com/ExWeiv/wix-ce-helpers

Last synced: about 7 hours ago
JSON representation

Custom element helpers for Wix powered websites/web apps

• Host: GitHub
• URL: https://github.com/ExWeiv/wix-ce-helpers
• Owner: ExWeiv
• Created: 2024-03-17T01:16:25.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-03-26T19:18:28.000Z (10 months ago)
• Last Synced: 2025-01-08T19:58:44.512Z (4 days ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/@exweiv/wix-secret-helpers
• Size: 10.7 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-wix - wix-ce-helpers - an NPM package with helper functions for custom elements in Wix. Made by **ExWeiv**. (Uncategorized / Uncategorized)
• awesome-wix - wix-ce-helpers - an NPM package with helper functions for custom elements in Wix. Made by **ExWeiv**. (Uncategorized / Uncategorized)

README

        
# Wix Custom Element Helpers

This package contain/s basic helpers to use in frontend for custom elements in Wix.

Example usage of sendJSON:

```js

// Import sendJSON for sending object data as JSON to custom element

import { sendJSON } from "@exweiv/wix-ce-helpers";

$w.onReady(() => {

  sendJSON("props", { clickCount: 100 }, "#customElement");

  $w("#customElement").on("onButtonClick", ({ detail }) => {

    sendJSON("props", { clickCount: detail.count * 2 }, "#customElement");

  });

});

```

Example usage of setupForReact function:

```js

/// 

// Custom Element Example

import React from "react";

import ReactDOM from "react-dom";

import Counter from "../components/Counter";

import styles from "../css/globalcss";

import { setupForReact } from "@exweiv/wix-ce-helpers";

const fonts = [

  ``,

  ``,

  ``

];

// or you can also pass links only

const fonts = ["https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"];

class CounterReactExample extends HTMLElement {

  rootDiv = document.createElement("div");

  constructor() {

    super();

    setupForReact(fonts, [styles], this);

    this.render(this.getAttribute("props"));

  }

  // Attributes keys that's listened for changes

  static get observedAttributes() {

    return ["props"];

  }

  /**

   * @param {string} name Name of attribute (key)

   * @param {String} oldValue Old value of attribute

   * @param {String} newValue New value of attribute

   */

  attributeChangedCallback(name, oldValue, newValue) {

    if (name === "props") {

      this.render(newValue);

    }

  }

  render(props) {

    // Create another HTML element to mount into div element + pass props as JS object

    const app = React.createElement(Counter, { ...JSON.parse(props), customElement: this });

    // Mount created app to div and render (after first mount it will only render changed elements)

    ReactDOM.render(app, this.rootDiv);

  }

}

customElements.define("react-counter-example", CounterReactExample);

```

> This will help you to build React based custom elements faster. You can pass null if you don't want to set one of the options except custom element.

---

[Kolay Gelsin](https://medium.com/the-optimists-daily/kolay-gelsin-a-turkish-expression-we-should-all-know-and-use-83fc1207ae5d) 💜