data-driven-motion

    0.0.11 • Public • Published

    data-driven-motion

    npm version Build Status codecov Standard - JavaScript Style Guide

    Easily animate your data in react

    This is a small wrapper around react-motion with the intention of simplifying the api for my most common use case.

    Demos and Docs

    npm install -S data-driven-motion

    Motion

    <Motion
      data={[]}
      component={<ul style={{ padding: 8 }} />}
      render={(key, data, style) => <li key={key} style={style}>{data.name}</li>}
      getKey={data => data.name}
      onComponentMount={data => ({ top: data.top, left: data.left })}
      onRender={(data, i, spring) => ({ top: spring(data.top), left: spring(data.left) })}
      onRemount={({ data }) => ({ top: data.top - 32, left: data.left - 32 })}
      onUnmount={({ data }, spring) => ({ top: spring(data.top + 32), left: spring(data.left + 32) })}
    />

    Install

    npm i data-driven-motion

    DownloadsWeekly Downloads

    12

    Version

    0.0.11

    License

    MIT

    Last publish

    Collaborators

    • tkh44