Détail du package

grapesjs-typed

GrapesJS10.4kMIT2.0.1

GrapesJS Typed

grapesjs, plugin

readme

GrapesJS Typed

GrapesJS Typed component made by wrapping Typed.js library

DEMO

Screenshot

Summary

  • Plugin name: grapesjs-typed

  • Components

    • typed - Main component

    | Prop | Description | Default | |-|-|- | strings | Strings to be typed | [] | | type-speed | Type speed in milliseconds | 0 | | start-delay | Time before typing starts in milliseconds | 0 | | back-speed | Backspacing speed in milliseconds | 0 | | smart-backspace | Only backspace what doesn't match the previous string | true | | back-delay | Time before backspacing in milliseconds | 700 | | fade-out | Fade out instead of backspace | false | | fade-out-class | CSS class for fade animation | typed-fade-out | | fade-out-delay | Fade out delay in milliseconds | 500 | | show-cursor | Show cursor | true | | cursor-char | Character for cursor | \| | | auto-insert-css | Insert CSS for cursor and fadeOut into HTML <head> | true | | bind-input-focus-events | Bind to focus and blur if el is text input | false | | content-type | 'html' or 'null' for plaintext | html | | loop | Loop strings | false | | loop-count | Amount of loops | Infinity | | shuffle | Shuffle the strings | false |

  • Blocks
    • typed - Main block
  • Traits
    • typed-strings - Textarea input to handle strings (one string per row)

Options

Option Description Default
script Library to load asynchronously in case Typed is not found CDN
block Object to extend the default block
eg. { label: 'Typed', ... }
Pass a falsy value to avoid adding the block		 {}
props Customize component's props. The final object should be returned from the function props => props

Download

  • CDN
    • https://unpkg.com/grapesjs-typed
  • NPM
    • npm i grapesjs-typed
  • GIT
    • git clone https://github.com/artf/grapesjs-typed.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-typed.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  const editor = grapesjs.init({
      container: '#gjs',
      // ...
      plugins: ['grapesjs-typed'],
      pluginsOpts: {
        'grapesjs-typed': { /* options */ }
      }
  });
</script>

Modern javascript

import grapesjs from 'grapesjs';
import plugin from 'grapesjs-typed';
import 'grapesjs/dist/css/grapes.min.css';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: { /* options */ }
  }
  // or
  plugins: [
    editor => plugin(editor, { /* options */ }),
  ],
});

Development

Clone the repository

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

Install dependencies

$ npm i

Start the dev server

$ npm start

Build the source

$ npm run build

License

MIT