grapesjs-typed
v2.0.1
Published
GrapesJS Typed
Downloads
9,738
Readme
GrapesJS Typed
GrapesJS Typed component made by wrapping Typed.js library
Summary
Plugin name:
grapesjs-typedComponents
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-typedInstall dependencies
$ npm iStart the dev server
$ npm startBuild the source
$ npm run buildLicense
MIT