- Notifications
You must be signed in to change notification settings - Fork12
GrapesJS Typed component made by wrapping Typed.js library
License
NotificationsYou must be signed in to change notification settings
GrapesJS/components-typed
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
GrapesJS Typed component made by wrapping Typed.js library
Plugin name:
grapesjs-typedComponents
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 falseBlocks
typed- Main block
Traits
typed-strings- Textarea input to handle strings (one string per row)
| Option | Description | Default |
|---|---|---|
script | Library to load asynchronously in caseTyped 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
<linkhref="https://unpkg.com/grapesjs/dist/css/grapes.min.css"rel="stylesheet"/><scriptsrc="https://unpkg.com/grapesjs"></script><scriptsrc="path/to/grapesjs-typed.min.js"></script><divid="gjs"></div><scripttype="text/javascript">consteditor=grapesjs.init({container:'#gjs',// ...plugins:['grapesjs-typed'],pluginsOpts:{'grapesjs-typed':{/* options */}}});</script>
Modern javascript
importgrapesjsfrom'grapesjs';importpluginfrom'grapesjs-typed';import'grapesjs/dist/css/grapes.min.css';consteditor=grapesjs.init({container :'#gjs',// ...plugins:[plugin],pluginsOpts:{[plugin]:{/* options */}}// orplugins:[editor=>plugin(editor,{/* options */}),],});
Clone the repository
$ git clone https://github.com/artf/grapesjs-typed.git$cd grapesjs-typedInstall dependencies
$ npm i
Start the dev server
$ npm start
Build the source
$ npm run build
MIT
About
GrapesJS Typed component made by wrapping Typed.js library
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.