essaimodal v1.0.9

essaimodal

D

pour les utilisateur de TS 

Installation

npm install essaimodal

Utilisation

<template>
  <div>
    {/* showmodal est ici la methode permettant d'ouvrir le modal , il aurait pu etre dans un lien ou autre , l'essentiel est qu'il soit conditionner a une action  */}
    <button @click="showModal" v-if="!modalShow"> Ouvrir</button>   
    <Essaimodal
    :applicationId="<YOU-APPLICATION-ID>" {/* veuillez remplacer <YOU-APPLICATION-ID> par le code qui vous a etet fourni */}
      :show="modalShow"
      @close="closeModal"
    />
  </div>
</template>

<script setup lang="ts">
{/* importer le composant */}
import Essaimodal from 'essaimodal';
import { ref } from 'vue';

const modalShow = ref(true);

const showModal = () => {
  modalShow.value = true;
};

const closeModal = () => {
  modalShow.value = false;
};

</script>

React

import React, { useEffect, useRef, useState } from 'react';
import 'essaimodal/dist/essai-modal.esm.js';

function App() {
  const modalRef = useRef(null);
  const [show, setShow] = useState(false);

  useEffect(() => {
    const handleClose = () => setShow(false);
    window.addEventListener('close', handleClose);
    return () => window.removeEventListener('close', handleClose);
  }, []);

  const openModal = () => setShow(true);

  return (
    <div className="App">
      <button onClick={openModal}>Open Modal</button>
      {show && <essai-modal show="true" applicationid="123" ref={modalRef}></essai-modal>}
    </div>
  );
}

export default App;

Angular

// Dans votre module principal
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import 'essaimodal/dist/essai-modal.esm.js';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

// Dans votre composant principal
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="showModal = true">Open Modal</button>
    <essai-modal *ngIf="showModal" [show]="true" applicationId="123"></essai-modal>
  `,
  styles: []
})
export class AppComponent {
  showModal = false;
}