#Grafa-web-components
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.
npm install @grafa/grafa-web-component
yarn add @grafa/grafa-web-component
Please install this package to render the components as well
npm install --save @webcomponents/webcomponentsjs
yarn add @webcomponents/webcomponentsjs
The following package may be required to listen for web-component events
npm install web-component-essentials --save
For more information on using web components in Vue click here
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>
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>
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;
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;
- blog-component
- Accepts:
- data-feed-key - key required to render a specifc content feed
- data-id - content ID to fetch the detail
- Accepts:
- grid-component
- Accepts:
- data-feed-key - key required to render a specifc content feed
- standalone="true" - uses popup component on item click
- Accepts:
- 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.
- Accepts:
- 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.
- Accepts:
- 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
MIT