Nietzsche's Preposterous Moustache

    @randajan/react-jetpack

    2.0.2 • Public • Published

    @randajan/react-jetpack

    @randajan/jetpack modification for react

    NPM JavaScript Style Guide

    Install

    npm install --save @randajan/react-jetpack

    React - jetpack pseudo-types

    This module includes two pseudo-types. The main reason for these pseudo-types is to secure reactElement and reactComponent from being maped with jet.map.it.

    • "reactElement" as "rele"
    • "reactComponent" as "rent"

    Example

    jet.type(<div/>) === "rele";
    jet.rele.is(<div/>) === true;
    
    jet.rele.copy(<div/>, {id:"foo"}) === <div id="foo"/>
    jet.rele() === <div/>
    

    Details

    Export

    name type arguments return use
    jet.rele React Element props div container Provider
    CSSLib class defs instance Provide CSS module, where you can redefine classNames for whole project
    CSSFile class CSSLib, file instance Provide wrap of require(file.css).
    useForceRender Hook - function Create function for rerendering. Instance of this function will stay same after rerender
    useEngage Hook function, number { result, pending, error } Will handle any promise for you. Second argument is cachetime in ms
    useFocus Hook boolean, function, boolean ref Will handle the focus of ref. When focus has changed the function (second argument) will be called
    useDrag Hook function [ref, move] Will notice any attempt to drag and report it to function with details of event
    useShift Hook function, number, number, boolean [ref, move] Turn the ref into shiftable object. Now user can drag the element around. Provided function can validate moving by editing passed object. Two numbers are initial X and Y coordinates and last argument switch relative (% !default) and absolute (px) positioning.
    useSwipe Hook function, array, number, number [ref] Listen the swipe event. Arguments: callback on swipe, allowed direction, minimal distance, max time.

    jet.rele.flags

    It will transform the multidimensional object to fill the custom attribute "data-flags". If the iteration proces found true (boolean) it will append the key instead of the value. Any function will be called with provided arguments.

    • Arguments
      • flags: mapable
      • ...args: any variables (will be passed to every function in flags variable)
    • Return
      • array with flags
    • Example
      • ["foo", "bar", "any"] === jet.rele.flags({nokey:v=>v, bar=>v==="foo", nofunction:"any"}, "foo")

    jet.rele.inject

    It will inject the return of injection to props of every children that met the filter criteria. Filter should be array with react types (or empty for disable filtering).

    • Arguments
      • children: React.Children
      • injection: function / object (the [children, key, level] will be passed to this function)
      • deep: boolean (iterating nested children, it will affect the level pass to the injection function)
      • filter: array (React types that will be injected)
    • Return
      • React.Children (array)
    • Example
    jet.rele.inject(<p id="bar"/>, {id:"foo"}) === <p id="foo"/>
    
    jet.rele.inject(<div><p id="bar"/></div>, child=>({id:"foo"}), false) === <div id="foo"><p id="bar"/></div>
    
    jet.rele.inject(<div><p id="bar"/></div>, child=>({id:child.type}), true) === <div id="div"><p id="p"/></div>
    
    jet.rele.inject(<div><p id="bar"/></div>, child=>({id:"foo"+child.props.id}), true, ["p"]) === <div><p id="foobar"/></div>

    CSSLib

    Overview

    CSSLib help managing clasNames across libraries. It can help adding multiple unique classNames cause it supports nested mapable objects. It can even resolve the functions anywhere inside. CSSLib should be created and instance exported with library for redefine the default classNames anywhere else

    CSSLib.constructor / CSSLib.define

    Define classNames translation for current CSSLib.

    • Arguments
      • defs: object (flat object)
    • Return
      • CSSLib

    CSSLib.open__

    Wraping the *.css into the CSSFile instance

    • Arguments
      • file: object (webpack require(*.css))
    • Return
      • CSSFile

    CSSFile.get

    It will return flat array with unique classNames. Array is enhanced so it will automatically joined separated with spaces instead of commas

    • Arguments
      • ...classNames: object (support nested objects)
    • Return
      • array

    License

    MIT © randajan

    Install

    npm i @randajan/react-jetpack

    DownloadsWeekly Downloads

    35

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    58.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • randajan