@exodus/haraka

0.0.38 • 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 = {
  freeze?: bool, // default = false, set to true to turn off animation completely
  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.

Readme

Keywords

none

Package Sidebar

Install

npm i @exodus/haraka

Weekly Downloads

972

Version

0.0.38

License

MIT

Unpacked Size

19.1 kB

Total Files

4

Last publish

Collaborators

  • tunguyennnnn
  • dimartiro
  • cdotta-exodus
  • awesomeniko
  • mbaraniak-exodus
  • maksim-iv-exodus
  • hasakura
  • milanvojnovic
  • olerass-exodus
  • kklash
  • shehryar6
  • rec
  • awilson-rs
  • ggabarrin-rs
  • r4vn
  • exorich
  • cryptosgr
  • mol0d
  • yevhenii_molodyk
  • yilmazbahadir
  • muratso
  • exoleo
  • 633kh4ck
  • ossel
  • davidfraga610
  • clarkexo
  • andrewrexo
  • james-gre
  • juraex
  • richayotte
  • ralph.ba
  • angelloz
  • joshuabot
  • jamiemaw
  • exodus-justin.za
  • javiexodus
  • rg911
  • alex.alexandrius
  • filipexodus
  • ryansquared-npm
  • andrescarreon
  • florianmathieu
  • janwe
  • fboucquez
  • skapala
  • umito
  • lanahizzle
  • iaacek
  • ps.mcnally
  • akinncar
  • matias.la
  • voltagebots
  • kwwood
  • sergii_bo
  • lekzd
  • alexandrbbm
  • danh.t.vo
  • ezenwankwogabriel
  • meniem
  • mzndako
  • kevva
  • feri42
  • jprichardson
  • farisissa
  • ryanzim
  • headfire
  • gutenye
  • mosesbot
  • roccomuso
  • dcastagnoli
  • sonaye
  • nareg_exodus
  • ves
  • tenaciousmv
  • asyakost
  • bulgakovk
  • chalker
  • andrejb
  • jaydp17
  • olistic
  • joepie91
  • merlz
  • vbonini
  • devopsrobot
  • jenish-sojitra
  • nachoalvarez
  • giovannirco
  • diegomura
  • lanre-mark
  • sunilagrawal
  • guillecura
  • mariosvlad
  • federico-po
  • pagan404