GrapesJS Typed component made by wrapping Typed.js library
-
Plugin name:
grapesjs-typed -
Components
typed- Main component
Prop Description Default stringsStrings to be typed []type-speedType speed in milliseconds 0start-delayTime before typing starts in milliseconds 0back-speedBackspacing speed in milliseconds 0smart-backspaceOnly backspace what doesn't match the previous string trueback-delayTime before backspacing in milliseconds 700fade-outFade out instead of backspace falsefade-out-classCSS class for fade animation typed-fade-outfade-out-delayFade out delay in milliseconds 500show-cursorShow cursor truecursor-charCharacter for cursor |auto-insert-cssInsert CSS for cursor and fadeOut into HTML <head>truebind-input-focus-eventsBind to focus and blur if el is text input falsecontent-type'html' or 'null' for plaintext htmlloopLoop strings falseloop-countAmount of loops InfinityshuffleShuffle the strings false -
Blocks
typed- Main block
-
Traits
typed-strings- Textarea input to handle strings (one string per row)
| 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 |
- CDN
https://unpkg.com/grapesjs-typed
- NPM
npm i grapesjs-typed
- GIT
git clone https://github.com/artf/grapesjs-typed.git
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 */ }),
],
});Clone the repository
$ git clone https://github.com/artf/grapesjs-typed.git
$ cd grapesjs-typedInstall dependencies
$ npm iStart the dev server
$ npm startBuild the source
$ npm run buildMIT