Nozzle Piping Mismatch

    react-ui-ox-anim
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    npm Libraries.io dependency status for specific release GitHub last commit GitHub issues GitHub license

    react-ui-ox-anim

    An animation package for react-ui-ox and the community

    Getting Started

    Add as a dependency

    npm install react-ui-ox-anim

    Add as a dev dependency

    npm install -D react-ui-ox-anim

    Components

    Animation

    Interfaces

    interface AnimationProps extends React.HTMLAttributes<HTMLDivElement> {
      animations: ANIMATION_TYPE | ANIMATION_OBJ;
    }
    interface ANIMATION_OBJ_CSS extends React.CSSProperties {
      keyframe: "from" | "to" | Range_0_100;
    }
    interface ANIMATION_OBJ extends React.CSSProperties {
      template?: ANIMATION_TYPE | Function;
      keyframes?: ANIMATION_OBJ_CSS[];
    }
    interface ANIMATION_OBJS {
      [key: string]: ANIMATION_OBJ;
    }

    Types

    Types values description
    ANIMATION_TYPE "wiggle", "circle", "poke", "grow", "swirve" The kind of animation to play

    Objects

    Object type description
    ANIMATIONS ANIMATION_OBJS Contains default ANIMATION_OBJs that you can pass in the animations prop

    Functions

    Types parameters return type description
    createPercentAnim css1 : React.CSSProperties, css2 : React.CSSProperties ANIMATION_OBJ_CSS[] Create a from to animation out of 2 CSS states
    createPercentAnim perc : ({ keyframe: Range_0_100 } | React.CSSProperties)[] ANIMATION_OBJ_CSS[] Create an animation from defined keyframes

    Transition

    Interfaces

    interface TransitionProps {
      animations: TRANSITION_TYPE | ANIMATION_OBJ;
    }
    interface TRANSITION_OBJS {
      [key: string]: ANIMATION_OBJ;
    }

    Types

    Types values description
    TRANSITION_TYPE "enterTop", "enterBottom", "enterLeft", "enterRight", "fadeInTop", "fadeInBottom", "fadeInLeft", "fadeInRight", "curveBottomFromTopLeft", "curveRightFromTopLeft", "curveBottomFromTopRight", "curveLeftFromTopRight", "curveRightFromBottomLeft", "curveTopFromBottomLeft", "curveLeftFromBottomRight", "curveTopFromBottomRight", "fadeInCurveBottomFromTopLeft", "fadeInCurveRightFromTopLeft", "fadeInCurveBottomFromTopRight", "fadeInCurveLeftFromTopRight", "fadeInCurveRightFromBottomLeft", "fadeInCurveTopFromBottomLeft", "fadeInCurveLeftFromBottomRight", "fadeInCurveTopFromBottomRight" The kind of transition to play

    Objects

    Object type description
    TRANSITIONS TRANSITION_OBJS Contains default TRANSITION_OBJSs that you can pass in the animations prop

    Install

    npm i react-ui-ox-anim

    DownloadsWeekly Downloads

    4

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    352 kB

    Total Files

    7

    Last publish

    Collaborators

    • alanox