Need help with react-framer?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

dabbott
208 Stars 6 Forks MIT License 36 Commits 2 Opened issues

Description

Create Framer (https://framer.com) prototypes using React (https://reactjs.org/)

Services available

!
?

Need anything else?

Contributors list

# 24,041
Swift
treemap
React
Sketch
36 commits

React Framer

This is a React renderer for Framer! You can write React components that render Framer layers.

You can try it out in your browser using this codepen template: https://codepen.io/pen?template=BJjyMR

Or play with this more fully-featured HSL color-picker prototype (originally written by the Framer team): https://dabbott.github.io/react-framer/example

This project is a proof-of-concept and is missing a lot of React/Framer features. I'm not sure how well it works with Framer Studio, if at all.

Why?

Framer is great for interaction design. React is great for building complex UIs. Why not combine the two and get the best of both worlds?

A

react-framer
component looks something like this:
const Label = ({ text }) => (
  
    
  
);

To see more, check out the color-picker example code: https://github.com/dabbott/react-framer/blob/master/example/app.js

Instructions

Make sure you have

yarn
installed and run:
yarn
yarn build

Then, open

example/index.html
in Chrome/Safari to preview the sample app.

Hacking

Run the webpack dev server with:

yarn dev

Then, navigate to http://localhost:8081/example/ in Chrome/Safari to preview the sample app.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.