Flow now exports React components! Adding a 3rd export platform is a major milestone for us because the true nature of Flow is starting to reveal itself — as a tool that can export to any language, platform and style.
React Toggle Button
The newest export option that Flow offers is a toggle button built in React. After creating your animation and export it, you can integrate it into your site with just two lines of code:
Import it like this:
import ReactButton from "./js/ReactButton";Use it like this:
<ReactButton elementID={"ReactButton"} callback={null} />❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎
Backed by Web Components
Backing this by HTML Web Components made it really easy for us to create this React export. Essentially, the component wraps this:
<timeline-button
id={this.props.elementID}
onClick={() => this.state.toggleButton.toggle(true)}
></timeline-button>I’m Amazed
I had a hearty giggle when our dev team showed me this for the first time. It took less than a week and is a beautiful testament not only to their abilities but to how truly awesome Flow is becoming.
Our goal is this:
- Import your designs.
- Animate them.
- Export to ANY language.
We’re definitely getting there.
❤︎
Wait. What’s Flow?!?!
Great question.
Flow is a UI Animation and code export tool for animating Sketch files and eliminating the most painful parts of hand-off in app development. It bridges the gap between design and development by exporting production-ready native code for iOS and HTML.
Our Site
Get a Copy
❤
Originally published at https://createwithflow.com on December 20, 2019.
