Naughty Program Manipulator

    @exodus/haraka

    0.0.37 • Public • Published

    Haraka

    npm version

    You define the behavior states of the component, and then animate between them.

    Usage

    import Behavior from '@exodus/haraka'
     
    box = React.createRef()
     
    <Behavior
      ref={this.box}
      state={[
        { opacity: 1 }, // state 0, or just `{}` since the default opacity is 1
        { opacity: 0.5 }, // state 1
        { rotate: '45deg' } // state 2
        { translateX: 10, translateY: 10 } // state 3
        { scale: 1.1 } // state 4
      ]}
    />
     
    // ..
     
    this.box.current.goTo(1) // animates the opacity of the box from 1 to 0.5
    this.box.current.goTo(2) // rotates the faded box 45 degrees
    this.box.current.goTo(3) // move the tilted faded box right and down by 10 points
    this.box.current.goTo(4) // scale the shifted tilted faded box by a factor of 1.1
     
    this.box.current.goTo([1, 2, 3, 4]) // plays a sequence of behavior states
     
    // or use the declarative API instead of `goTo()`
    <Behavior currentState={0} />
    <Behavior currentState={1} />

    Install

    yarn add @exodus/haraka

    Definition

    type DefaultConfig = { // goTo() default configuration
      type?: 'spring' | 'timing', // default = 'spring', `Animated.spring()` or `Animated.timing()`
      onComplete?: func, // to be executed once animation is completed, inside `.start()`
      delay?: number, // used to delay the start of the animation (ms)
      ref?: bool, // this will return the animation reference instead of playing it immediately
      unmount? bool, // unmount after animation ends
      // can be useful for animating multiple behaviors with `Animated.sequence()` and `Animated.parallel()`
      // `onStart` and `onComplete `are ignored when `ref` is enabled
      ...AnimatedSpringOptions, // excluding toValue, useNativeDriver (see React Native docs), spring type
      ...AnimatedTimingOptions, // excluding toValue, useNativeDriver (see React Native docs), timing type
    }
     
    type State = {
      opacity?: number, // [0, 1], default = 1
      rotate?: string, // e.g. '45deg', default = '0deg'
      scale?: number, // default = 1
      translateX?: number, // default = 0
      translateY?: number, // default = 0
      config?: DefaultConfig, // you can pass custom state config here
    }
     
    type StyleProp = {
      prop: string,
      default: string | number | null,
      transform: bool,
    }
     
    type Behavior = {
      config?: DefaultConfig,
      clearStyleProps?: bool, // removes all default style props on mount and utilizes whatever in `styleProps` only
      disabled?: bool, // allows disabling the behavior interactivity through pointerEvents = none
      state?: State[], // default value is [{}, {}], [{}] can be used for a static behavior
      nativeDriver?: AnimatedValue, // default = new Animated.Value(0), you can use a custom native driver
      children?: any, // behavior component can enclose other components or enclose another behavior(s)
      clamp?: bool, // default = false, prevent animations from exceeding their ranges
      keys?: number[], // can be used with custom drivers to define custom state keys/indices
      currentState?: number, // default = 0, use to declaratively toggle animation
      initialState?: number, // default = 0
      skipProps?: string[], // default = [], allows filtering passed props from being included in styles
      skipStyleProps?: string[], // default = [], allows dropping unused style props
      style?: object, // style of the behavior view, default = {}, AnimatedViewStyle (see React Native docs)
      styleProps?: StyleProp[], // default = [], allows adding any type of style props manually
      unmounted?: bool, // default = false, start behavior in the unmounted state
      // animation presets (they populate `state` prop which will be ignored):
      faded?: bool, // default = false, see below for available presets
      // layout presets (they populate `style` prop):
      absolute?: bool, // default = false, see below for available presets
      centered?: bool, // default = false
      fixed?: bool, // default = false
      full?: bool, // default = false
      landing?: bool, // default = false
    }
     
    // animation presets
    const presets = {
      faded: [{ opacity: 0 }, { opacity: 1 }],
    }
     
    // layout presets, you can use multiple, along with `style` prop, they have a higher priority over it
    const layoutPresets = {
      absolute: { bottom: 0, left: 0, position: 'absolute', right: 0, top: 0 },
      centered: { alignSelf: 'center' },
      fixed: { position: 'absolute' },
      full: { flex: 1 },
      landing: { alignItems: 'center', flex: 1, justifyContent: 'center' },
    }
     
    // methods
    // animate to a specific behavior state
    behavior.goTo(index: number | number[], config?: DefaultConfig = {})
     
    behavior.unmount() // useful for removing components that are hidden after animation
    behavior.mount(state: ?number) // useful for animations that start in a hidden state
    // use along with `unmounted` prop and `mount()`
     
    behavior.key // to retrieve current state key
     
    behavior.setNativeProps({} : Props) // gives you the ability to change props without having to re-render

    Examples

    Available here.

    Keywords

    none

    Install

    npm i @exodus/haraka

    DownloadsWeekly Downloads

    72

    Version

    0.0.37

    License

    MIT

    Unpacked Size

    23.7 kB

    Total Files

    5

    Last publish

    Collaborators

    • siva-ramnathan
    • kwwood
    • sergii_bo
    • ericvicenti
    • mrousavy
    • dimitrios.pa
    • mongkuen
    • philipcr
    • jacobbr22
    • kashifchoudhry
    • lekzd
    • cdotta
    • ryansquared
    • alexandrbbm
    • danm.exodus
    • danh.t.vo
    • renie
    • alex.alexandrius
    • ezenwankwogabriel
    • meniem
    • mzndako
    • ianertson
    • kevva
    • jumokeolads
    • aaronloexodus
    • vikgmdev
    • iamcrazycoder
    • kewde_
    • cassapula
    • wjbeau
    • feri42
    • jprichardson
    • farisissa
    • dooglio
    • ryanzim
    • headfire
    • kklash
    • gutenye
    • mosesbot
    • roccomuso
    • dcastagnoli
    • sonaye
    • nareg_exodus
    • ves
    • tenaciousmv
    • asyakost
    • maxogden
    • bulgakovk
    • sekhmet
    • chalker
    • andrejb
    • gordonel
    • richayotte
    • jaydp17
    • olistic
    • joepie91
    • merlz
    • jadechip
    • vbonini
    • cooncesean
    • devopsrobot
    • jenish-sojitra
    • unidwell
    • nachoalvarez
    • giovannirco
    • ilyavf
    • rec
    • dncabal
    • r1oga
    • diegomura
    • danilsergeev
    • lanre-mark
    • sunilagrawal
    • guillecura
    • motorina0
    • chadstrat
    • mariosvlad
    • federico-po
    • pagan404