npm

Need private packages and team management tools?Check out npm Orgs. »

@neq1/animate

2.0.0-alpha.1 • Public • Published

Animate

A component of N=1. Source code is available at GitHub.

Animate will animate its children using a generator hook. Children can be any react component.

The following example is a storybook story.

 <Animate
    name={"storybook.animation"}
    g={g}
 
    active={ boolean('active', true)}
    overflowX={'hidden'}
    overflowY={'hidden'}
    componentsSize={{width: 70, height: 50}}
  >
    <Panel
      key={'layout#1'}
      style={{
        backgroundColor: 'coral',
        borderStyle: 'solid',
        borderColor: 'black',
        borderWidth: 1
      }}
    >
       {(args: IMetaDataArgs) => {
            return (
              <div style={{padding: 5}}>
              <span>x{args.block.x.toFixed(0)}</span> <br/>
              <span>y{args.block.y.toFixed(0)}</span>
              </div>
            )
          }}
    </Panel>
  </Animate>

To see it in action run 'yarn storybook' on your clone.

install

npm i @neq1/animate

Downloadsweekly downloads

9

version

2.0.0-alpha.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability