0.4.4 • Published 7 months ago
flippo v0.4.4
Flippo
Flipping easy transitions.
Uses the FLIP technique to transition elements from one state to another.
⚠ Flippo is still very much a work-in-progress. Expect the API to change.
Getting Started with React
Install with yarn or NPM:
yarn add flippo-react
npm install --save flippo-react
Import flippo-react
:
import { FlipScope, Flip } from "flippo-react";
Wrap elements you want to transition in the Flip
component:
<Flip id="box"><div className="box"></div></Flip>
To transition from one element to a another element, give them the same id:
showLarge
? <Flip id="box"><div className="large"></div></Flip>
: <Flip id="box"><div className="small"></div></Flip>
Wrap all of the Flip
'd elements in the FlipScope
component. All of the elements in a FlipScope
will transition when the FlipScope
's triggerData
changes.
function FlippingDemo() {
let [showLarge, setShowLarge] = React.useState(false);
return <FlipScope triggerData={showLarge}>
<button onClick={() => setShowLarge(large => !large)}>Toggle size</button>
{showLarge
? <Flip id="box"><div className="large"></div></Flip>
: <Flip id="box"><div className="small"></div></Flip>
}
</FlipScope>;
}
Running the Examples
- Download the source.
- In the root folder, run
yarn
to fetch dependencies and build. - Run
yarn examples
, which will start a local server and open the examples in your default browser.