Have ideas to improve npm?Join in the discussion! »

    vue-glitched-writer
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.8 • Public • Published

    Glitched Writer Vue Component

    npm npm type definitions NPM

    glitched-writer-preview

    What is Glitched Writer:

    A lightweight npm module for writing text to HTML elements. Highly customizable settings. Decoding, decrypting, scrambling, and simply spelling out text.

    Vue component

    This is a Vue.js Single File Component, serving as a wrapper for Glitched Writer to simplify it's usage in Vue.


    >>> PLAYGROUND <<< | >>> EXAMPLES <<< | >>> VUE DEMO <<< | >>> JS Module <<<


    Installation

    Download and install with npm.

    npm i vue-glitched-writer

    For Vue 3:

    npm i vue-glitched-writer@next

    Import inside the script tag.

    import GlitchedWriter from 'vue-glitched-writer'

    Or use Skypack to import without need to install the package.

    import GlitchedWriter from 'https://cdn.skypack.dev/vue-glitched-writer'

    Usage:

    Declare component

    <script>
    	export default {
    		components: {
    			GlitchedWriter,
    		},
    	}
    </script>

    Animate text instantly after load

    Will animate blank -> passed text property

    <glitched-writer text="Your Content" appear />

    Write text dynamically

    Animate each time the txt prop changes. Previous text -> new text

    <glitched-writer :text="text" />

    Queue Writing

    If you want to write texts for prepared array, then you can pass that array to as text and glitched writer will turn it into a working queue.

    data() {
       return {
          phrases: [
    				'Hello and Welcome',
    				'What is this?!',
    				'It appears i\'m in some queue...',
          ]
       }
    }
    <glitched-writer :text="phrases" />
    
    <!-- add prop "queue" to controll the queue -->
    <glitched-writer
    	:text="phrases"
    	:queue="{
          interval: 1200, // [ms]
          loop: true
          // false -> stop (default)
          // true -> continue looping
          // Function -> stop and fire the function.
          // Number -> wait number ms and continue looping
       }"
    />

    Using Presets

    List of available presets.

    <glitched-writer text="Your Text" preset="zalgo" />
    
    <!-- Passing options prop will extend the preset -->
    <glitched-writer text="Your Text" preset="zalgo" :options="{ html: true }" />

    Custom Options

    See Glitched Writer's Option List.

    Passing options object to component.

    {
       data() {
          return {
             text: 'Your Text',
             options: {
                html: true,
                letterize: true,
                steps: [0, 10],
                delay: [500, 2000],
                glyphs: 'QWERTYUIOPASDFGHJKLZXCVBNM!@#$%^&*()1234567890'
             },
          }
       },
    }
    <glitched-writer :text="text" :options="options" />

    Changing options later

    When changing options object (passed to the component), you need to remember to reassign the object property, instead of modifying it.

    {
       methods: {
          changeOprions(){
             // RIGHT
             this.options = {
                steps: [2, 15],
                html: false,
    
                ...this.options
                // destructure previous options to extend it
             }
    
             // WRONG: this.options.steps = [2, 15]
          }
       }
    }

    Pausing the animation

    The "pause" boolean property is responsible for programatic pausing. Simply set "pause" property to true if you want the animation to stop.

    data() {
       return {
          pause: true
       }
    }
    <glitched-writer :text="text" :pause="pause" />

    Component Events

    Glitched Writer emits 3 events: on every step and writing finish.

    • start - when writer starts writing
    • step - on every step of writing process
    • finish - when writer finishes writing
    <glitched-writer @start="method" @step="method" @finish="method" />
    {
       methods: {
          method(text: string, data: WriterDataResponse){
             console.log(text, data.options)
          }
       }
    }
    
    // WriterDataResponse: {
    // 	string: string
    // 	writer: GlitchedWriter
    // 	options: Options
    // 	state: State
    // 	status?: 'ERROR' | 'SUCCESS'
    // 	message?: string
    // 	error?: any
    // }

    Accessing GlitchedWriter Instance

    If you want to do something custom with the component, you can use GlitchedWriter class instance attached to the html element.

    <glitched-writer :text="text" ref="el" />
    mounted(){
       console.log(this.$refs.el.$writer)
    }

    More Information

    If you are curious about further customization of animation effect and behavior, then please visit the original Glitched Writer Readme. There you'll find description of every option and some use cases.

    Install

    npm i vue-glitched-writer

    DownloadsWeekly Downloads

    91

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    265 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar