@claudebernard/news-element-dev NPM

= elements

An element providing Claude Bernard's latest news about health.

== Documentation

See the full documentation for Lit at https://docs.claudebernard.fr/elements/news[docs.claudebernard.fr].

You can play with a full https://docs.claudebernard.fr/elements/news/demo[demo].

== Installation

npm install --save @claudebernard/news-element

== Usage

=== Angular

Import as ES modules in the app.module.ts file.

import '@claudebernard/news-element';

In the html file that will use the custom element :

<bcb-news [hideHeader]="true" (onNewsClicked)="handleClick($event)"></bcb-news>

To test click event :

handleClick(news) {
    alert(news.detail.data.newsTitle);
}

=== Vue.js

Import as ES modules in the App.vue file.

import '@claudebernard/news-element';

In the html file that will use the custom element :

<bcb-news id="bcb-news" :hideHeader="true"></bcb-news>

To paste in App.vue or in the file that will use the custom element :

<script setup lang="ts">
import { onMounted } from 'vue'

const handleClick = (event) => {
  alert(event.detail.data.newsTitle);
} 

// To test click event :

onMounted(() => {
  const el = document.getElementById('bcb-news');
  el.addEventListener('onNewsClicked', (e) => {
    handleClick(e);
  });
});
</script>

=== React

Import as ES modules in the App.tsx file. Don't forget to do 'npm install' after importing '@lit-labs/react'.

import {BcbNews} from '@claudebernard/news-element';
import {createComponent} from '@lit-labs/react';
import React, { useState } from 'react'

To paste in App.tsx file or in the file that will use the custom element :

export const BcbNewsReact = createComponent({
  react: React,
  tagName: 'bcb-news',
  elementClass: BcbNews, 
  events: {
    onNewsClicked: 'onNewsClicked'
  }
});

To paste in the return part of the .tsx file :

<BcbNewsReact hideHeader={true} onNewsClicked={(news) => handleClick(news)}></BcbNewsReact>

To test click event :

const handleClick = (news) => {
  alert(news.detail.data.newsTitle)
}

=== Vanilla JS :

Import as ES modules in the App.js file.

import '@claudebernard/news-element';

To paste in the html part of the file that will use the custom element :

<bcb-news id="bcb-news" hideHeader></bcb-news>

To test click event :

let bcbNewsComponent = document.getElementById('bcb-news');
bcbNewsComponent.addEventListener('onNewsClicked', function(event) {
  alert(event.detail.data.newsTitle);
});

== Attributes