Skip to content

Latest commit

 

History

History
138 lines (100 loc) · 3.2 KB

README.md

File metadata and controls

138 lines (100 loc) · 3.2 KB
Raw

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