Build UI Components From JSON – HyderJS

Category: Javascript , Recommended | August 6, 2020
Author: imprakashraghu
Views Total: 7 views
Official Page: Go to website
Last Update: August 6, 2020
License: MIT

Preview:

Build UI Components From JSON – HyderJS

Description:

HyderJS is a modern open-source JavaScript library that allows you to quickly build reusable UI components from JSON.

How to use it:

1. Load the minified version of the HyderJS library in the document.

<script src="./lib/hyder.min.js"></script>

2. Construct your UI components as follows. Supported components:

  • heading
  • text
  • image
  • button
  • input
  • container
  • link
  • list
  • dropdown
  • break
  • form
  • card
// heading
let title = {
    type: "heading",
    data: {
      text: "Text/HTML Here",
      style: {
        textAlign: "center",
        // more CSS styles here
      }
    }
};

// text
let description = {
    type: "text",
    data: {
      text: "Text/HTML Here",
      style: {
        textAlign: "center",
        // more CSS styles here
      }
    }
};

// image
let image = {
    type: "image",
    data: {
        id: "image-id",
        alt: "image-alt",
        src: "path/to/image.png",
        style: {
          width: "100%",
          // more CSS styles here
        }
    }
};

// buttons
let image = {
    "type": "button",
    "data": {
      "text": "Elegant",
      "type": "elegant",
      "style": {
            "color": "black"
      },
      "margin": {
        "x": 2,
        "y": 2
      },
      "padding": 2
    }
};

// input
let input = {
    "type": "input",
    "data": {
      "input": "url",
      "placeholder": "url here",
      "style": {
        "color": "black",
      },
      "margin": {
        "x": 2,
        "y": 2
      },
      "padding": 2
    }
};

// container
let container = {
    "type": "container",
    "data": {
      "arrange": "row",
      "align": "column",
      "items": [],
      "style": {
        "color": "black"
      },
      "margin": {
        "x": 2,
        "y": 2
      },
      "padding": 2
    }
};

// link
let link = {
    "type": "link",
    "data": {
      "href": "URL_LINK",
      "style": {
        "color": "black",
        "backgroundColor": "transparent",
        "textDecoration": "underline"
      },
      "margin": {
        "x": 2,
        "y": 2
      },
      "padding": 2
    }
};

// list
let list = {
    "type": "list",
    "data": {
      "items": [{
        "text": "item1"
      }],
      "style": {
        "color": "black"
      },
      "margin": {
        "x": 2,
        "y": 2
      },
      "padding": 2
    }
};

// dropdown
let dropdown = {
    "type": "dropdown",
    "data": {
      "options": [{
        "text": "Text of option",
        "value": "Value of option",
        "style": {}
      }],
      "style": {
        "color": "black",
        "backgroundColor": "transparent",
        "textDecoration": "underline"
      },
      "margin": {
        "x": 2,
        "y": 2
      },
      "padding": 2
    }
};

// Break
let break = {
    "type": "list",
    "data": {
      "type": "br"
    }
};

// form
let form = {
    "type": "dropdown",
    "data": {
      "action": "",
      "method": "POST",
      "items": [],
      "style": {
        "color": "black",
        "backgroundColor": "transparent"
      },
      "margin": {
        "x": 2,
        "y": 2
      },
      "padding": 2
    }
};

// card
let form = {
    "type": "card",
    "data": {
      "shadow": "large",
      "items": [],
      "margin": {
          "x": 2,
          "y": 2
      },
      "padding": 2
    }
};

3. Add these UI components to a JSON array.

let blocks = [
    {
      type: "container",
      data: {
        margin: {
          y: 4
        },
        arrange: "column",
        align: "center",
        items: [
          image,
          title,
          description,
          ... more components here ...
        ]
      }
    }
];

Initialize the library and render the data into the document.

new HyderJS({

    // your JSON array
    bricks: blocks, 

    // id of the root container for rendering
    wall: "app" 
    
});

Changelog:

v1.0.0 (08/06/2020)

  • Supports playground service to create websites online
  • Unique key is attached to all the components
  • All components are optimized for rendering

You Might Be Interested In:


Leave a Reply