@grafa/grafa-web-component NPM

#Grafa-web-components

Introduction

The web components are designed to be straightforward and easy to use. Web components are custom HTML elements that encapsulate their functionality, making it easier to reuse and maintain code.

This indicates that the web component's primary function is to display a list of news articles. By being able to function on "different platforms," it implies that the component is cross-platform compatible and can work on various devices or operating systems.

The web components are a flexible, reusable, and platform-independent solution for displaying news lists across different JavaScript frameworks, offering developers an easy way to integrate news content into their applications across various platforms. These can be simply used on platforms like React, Angular, Vue.

Installation

npm install @grafa/grafa-web-component

or

yarn add @grafa/grafa-web-component

Dependency Package

Please install this package to render the components as well

npm install --save @webcomponents/webcomponentsjs

or

yarn add @webcomponents/webcomponentsjs

React Dependency

The following package may be required to listen for web-component events

npm install web-component-essentials --save

Vue & Web Components

For more information on using web components in Vue click here

Usage

import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
import "@grafa/grafa-web-component/dist";

<div class="App">
  <blog-component data-feed-key="YOUR_FEED_KEY_HERE" data-id="128499"></blog-component>
</div>

Usage with a combination of components

import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
import "@grafa/grafa-web-component/dist";

<style>
  .carousel-advert-example {
    align-items: center;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    & > div {
      flex: 1;
    }
  }
</style>

<div class="App">
  <div class="carousel-advert-example">
    <div id="carousel">
      <!-- data-feed-key="YOUR_FEED_KEY_HERE" // REQUIRED: feed key renders specific content feed -->
      <carousel-component
        data-feed-key="my-grafa-key-3"
        data-item-small="2"
        data-item-medium="3"
        data-item-large="4"
        data-loop="false"
        standalone="true"
        view-more="true"
      ></carousel-component>
    </div>
    <div>
      <grafa-advert></grafa-advert>
    </div>
  </div>
</div>

<script>
  let carousel = document.getElementById('carousel')

  function handleViewMore() {
    location.href = './article/index.html'
  }

  carousel?.addEventListener('viewMore', handleViewMore)
  
  window.unload = function () {
    carousel = document.getElementById('carousel')
    carousel?.removeEventListener('viewMore', handleViewMore)
  }
</script>

Sample React usage code

import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
import "grafa-web-components/dist";
function App() {
  const listRef = useRef();
  return (
    <div className="App">
      <list-component ref={listRef} data-feed-key="my-grafa-key" standalone="true"></list-component>
    </div>
  );
}
export default App;

Sample React usage with a combination of components

To listen to the view-more event being emitted by the web-component you will likely need to create a wrapper component and attach an event listener to the ref.

// CarouselCombination.js
import React, { Component } from 'react';
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
import '@grafa/grafa-web-component';
import 'web-component-essentials';

class CarouselCombination extends Component {
  constructor(props) {
    super(props);
    this.carouselRef = React.createRef();
  }

  componentDidMount() {
    if (this.props.onViewMore) {
      this.carouselRef.current.addEventListener('viewMore', (e) =>
        this.props.onViewMore(e)
      );
    }
  }

  render() {
    return (
      <div className="carousel-advert-example">
        <div id="carousel">
          <carousel-component
            ref={this.carouselRef}
            data-feed-key="my-grafa-key-3"
            data-item-small="2"
            data-item-medium="3"
            data-item-large="4"
            data-loop="false"
            standalone="true"
            view-more="true"
          ></carousel-component>
        </div>
        <div>
          <grafa-advert></grafa-advert>
        </div>
      </div>
    );
  }
}

export default Carousel;

// App.js
import CarouselCombination from './CarouselCombination';

function App() {
  const handleViewMore = () => {
    /* NAVIGATE TO PAGE WITH BLOG-COMPONENT, GRID-COMPONENT, OR LIST-COMPONENT */
  }

  return (
    <div className="App">
      <CarouselCombination onViewMore={handleViewMore} />
    </div>
  );
}
export default App;

Other components

blog-component
- Accepts:
  - data-feed-key - key required to render a specifc content feed
  - data-id - content ID to fetch the detail
grid-component
- Accepts:
  - data-feed-key - key required to render a specifc content feed
  - standalone="true" - uses popup component on item click
list-component
- Accepts:
  - data-feed-key - key required to render a specifc content feed
  - standalone="true" - uses popup component on item click
  - view-more="true" - Accepts "true" or "false". Omitting view-more or setting to 'false' will default to showing next/previous pagination buttons.
carousel-component
- Accepts:
  - data-feed-key - key required to render a specifc content feed
  - data-item-small="2" - Number of items to show on small width
  - data-item-medium="3" - Number of items to show on medium width
  - data-item-large="4" - Number of items to show on large width
  - data-loop="false" - Whether to loop the carousel items
  - standalone="true" - uses popup component on item click
  - view-more="true" - Accepts "true" or "false". false hides the view-more button. Omitting view-more will default to an anchor tag redirecting to Grafa news.
popup-component
- data-feed-key - key required to render a specifc content feed
- Accepts a parameter data-id - content ID to fetch the detail
grafa-advert
grafa-advert-footer