React!

Flow
2 min readDec 20, 2019

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:

  1. Import your designs.
  2. Animate them.
  3. 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

createwithflow.com

Get a Copy

createwithflow.com/download

Originally published at https://createwithflow.com on December 20, 2019.

--

--

Flow

A new class of UI Animation software. Import from Sketch. Animate in Flow. Export production-ready code.