Nth Phonetic Mnemonic

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

    1.0.1 • Public • Published

    GrapesJS Countdown

    Simple countdown component for GrapesJS Editor

    GrapesJS


    Demo

    Summary

    • Plugin name: grapesjs-component-countdown
    • Components: countdown
    • Blocks: countdown

    Options

    Option Description Default
    id The ID used to create the block and component. countdown
    label The label used for the block and the component. Countdown
    block Object to extend the default block, eg. { label: 'Countdown', category: 'Extra', ... }. Pass a falsy value to avoid adding the block. {}
    props Object to extend the default component properties., eg. { name: 'Countdown', droppable: false, ... }. {}
    style Custom CSS styles for the component. This will replace the default one. ''
    styleAdditional Additional CSS styles for the component. These will be appended to the default one. ''
    startTime Default start time, eg. 2030-01-25 00:00. ''
    endText Text to show when the countdown is ended. 'EXPIRED'
    dateInputType Date input type, eg. date, datetime-local 'date'
    labelDays Days label text used in component. 'days'
    labelHours Hours label text used in component. 'hours'
    labelMinutes Minutes label text used in component. 'minutes'
    labelSeconds Seconds label text used in component. 'seconds'
    classPrefix Countdown component class prefix. 'countdown'

    Download

    • CDN
      • https://unpkg.com/grapesjs-component-countdown
    • NPM
      • npm i grapesjs-component-countdown
    • GIT
      • git clone https://github.com/artf/grapesjs-component-countdown.git

    Usage

    Directly in the browser

    <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
    <script src="https://unpkg.com/grapesjs"></script>
    <script src="path/to/grapesjs-component-countdown.min.js"></script>
    
    <div id="gjs"></div>
    
    <script type="text/javascript">
      var editor = grapesjs.init({
          container : '#gjs',
          // ...
          plugins: ['grapesjs-component-countdown'],
          pluginsOpts: {
            'grapesjs-component-countdown': { /* options */ }
          }
      });
    </script>

    Modern javascript

    import grapesjs from 'grapesjs';
    import pluginCountdown from 'grapesjs-component-countdown';
    
    const editor = grapesjs.init({
      container : '#gjs',
      // ...
      plugins: [pluginCountdown],
      pluginsOpts: {
        [pluginCountdown]: { /* options */ }
      }
      // or
      plugins: [
        editor => pluginCountdown(editor, { /* options */ }),
      ],
    });

    Development

    Clone the repository

    $ git clone https://github.com/artf/grapesjs-component-countdown.git
    $ cd grapesjs-component-countdown

    Install it

    $ npm i

    Start the dev server

    $ npm start

    Build before the commit. This will also increase the patch level version of the package

    $ npm run build

    License

    BSD 3-Clause

    Install

    npm i grapesjs-component-countdown

    DownloadsWeekly Downloads

    7,895

    Version

    1.0.1

    License

    BSD-3-Clause

    Unpacked Size

    25.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • artf