TypeScript icon, indicating that this package has built-in type declarations

0.149.0 • Public • Published

Built With Stencil

Covet.pics Widget

Standalone Covet.pics Web Component built using Stencil.

Getting Started

Clone this repo to a new directory:

git clone https://github.com/SpaceSquirrelApps/covet-pics-widget.git covet-pics-widget
cd covet-pics-widget

and run:

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Need help? Check out Stencil docs here.

Components Overview


This component will grab gallery embed data from Covet.pics API and parse settings to determine gallery layout (grid, slider, collage) and other settings, like colors, sizes, paddings, etc. It will then render appropriate components


This is a Grid layout with options to render "highlighted" images. There are two main layout modes supported (grid or collage) and can be toggled through property layout. Items in grid are <covet-pics-gallery-item>.

On initialization, element will also create <covet-pics-popup> and inject it just before </body>. This is done so that popup will always be on top of the any page element.


This is a Slider (also known as slideshow) layout. Same as <covet-pics-gallery-grid>, items in slider are <covet-pics-gallery-item> and slider is creating <covet-pics-popup> and injecting just before </body>.


This is a popup component that's used in tandem with <covet-pics-gallery-grid> & <covet-pics-gallery-slider>.


This is essential building block and child element for <covet-pics-gallery-grid> or <covet-pics-gallery-slider>

Using Covet.pics Widget components

Script tag

  • Publish to NPM
  • Put a script tag similar to this <script src='https://unpkg.com/@covet-pics/covet-pics-widget@latest/dist/covet-pics-widget/covet-pics-widget.js'></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc.
  • Typical usage would be to render a gallery. For this you need to know Gallery Embed ID and then you can embed only covet-pics-widget and that component will take care of loading all necessary elements, for eg. this is what embed code markup would look like:


  <covet-pics-widget gallery-embed-id="XYZ"></covet-pics-widget>



After component is loaded, markup could looks like this (if it's grid layout):



  <covet-pics-widget gallery-embed-id="XYZ">




Node Modules

  • Run npm install covet-pics-widget --save
  • Put a script tag similar to this <script src='node_modules/covet-pics-widget/dist/covet-pics-widget.js'></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc


  • To update snapshots run: npm test -u or yarn test -u or npm run test --updateSnapshot




Package Sidebar


npm i @covet-pics/covet-pics-widget

Weekly Downloads






Unpacked Size

26.8 MB

Total Files


Last publish


  • domagojb