Naphthalene Possum Management

    stack-events

    0.1.18 • Public • Published

    Overview

    stack-events is a simple JavaScript module for implementing state machine arcitecture of component event handling

    Installation

    npm install stack-events --save

    Usage

    1. You need to wrap your application with <StackEvents /> with events prop passed to it; events - is an array of string keys. Each key is a supported DOM event name that StackEvents should handle on. If no events wass passed in the component will not handle any events at all.
        ...
            return (
                <EventStack events={["keydown", "mousedown"]}>
                    {this.props.child}
                </EventStack>
            );
        ...

    You can use string keys or constans from stack-events/const list; The list of available methods constans are below in this readme file

    1. In the child component you shoul call withStackEvents HOC for you component.
        import React from 'react';
        import { withEventStack } from '../component';
    
        ...
    
        class MyComponent extends React.Component {
            ...
        }
    
        ...
    
        export default withEventStack(MyComponent);

    After HOC your componen will receive two methods: pushEvents and popEvents.

    1. Use pushEvents into component's componentDidMount life method to push your component event handlers to stackEvents stack;
        ...
    
        componentDidMount() {
            this.props.pushEvents({
                "keydown": this.handleKeyDown,
                "keyup": this.handleKeyUp
            })
        }
        
        ...
    1. Don't forget to use popEvents in component's componentWillUnmount method to pop events from the stack.
        ...
    
        componentWillUnmount() {
            this.props.popEvents();
        }
        
        ...

    Events constants

    • ABORT
    • ANIMATIONEND
    • ANIMATIONITERATION
    • ANIMATIONSTART
    • BLUR
    • CANPLAY
    • CANPLAYTHROUGH
    • CHANGE
    • CLICK
    • CONTEXTMENU
    • COPY
    • CUT
    • DBLCLICK
    • DRAG
    • DRAGEND
    • DRAGENTER
    • DRAGEXIT
    • DRAGLEAVE
    • DRAGOVER
    • DRAGSTART
    • DROP
    • DURATIONCHANGE
    • EMPTIED
    • ENCRYPTED
    • ENDED
    • ERROR
    • FOCUS
    • FOCUSIN
    • FOCUSOUT
    • HASHCHANGE
    • INPUT
    • INVALID
    • KEYDOWN
    • KEYPRESS
    • KEYUP
    • LOAD
    • LOADEDDATA
    • LOADEDMETADATA
    • LOADSTART
    • MOUSEDOWN
    • MOUSEENTER
    • MOUSELEAVE
    • MOUSEMOVE
    • MOUSEOUT
    • MOUSEOVER
    • MOUSEUP
    • PASTE
    • PAUSE
    • PLAY
    • PLAYING
    • POPSTATE
    • PROGRESS
    • RATECHANGE
    • RESET
    • RESIZE
    • SCROLL
    • SEEKED
    • SEEKING
    • SELECT
    • STALLED
    • SUBMIT
    • SUSPEND
    • TIMEUPDATE
    • TOUCHCANCEL
    • TOUCHEND
    • TOUCHMOVE
    • TOUCHSTART
    • TRANSITIONEND
    • UNLOAD
    • VOLUMECHANGE
    • WAITING
    • WHEEL

    Keywords

    none

    Install

    npm i stack-events

    DownloadsWeekly Downloads

    5

    Version

    0.1.18

    License

    MIT

    Unpacked Size

    182 kB

    Total Files

    6

    Last publish

    Collaborators

    • yohanson555