A Babel plugin to remove Framer X code from your React components.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.babelrc
.gitignore
README.md
package.json
yarn.lock

README.md

babel-plugin-framer-x

Who is this for?

  • You have components built with Framer X, but want to publish a living styleguide with something like Storybook or Styleguidist.
  • You want to use components built in Framer X directly in a React application.

This plugin removes two things that normally you need to do by-hand:

  • All imported values from framer.
  • All propertyControls class properties.
// Removes this
import { PropertyControls, ControlType } from "framer";

// Removes this
const { PropertyControls, ControlType } = require("framer");

// Removes this
static propertyControls: PropertyControls = {
  text: { type: ControlType.String, title: "Text" },
  color: { type: ControlType.Color, title: "Background Color" }
}

// Removes this
ComponentName.propertyControls = {
  text: { type: ControlType.String, title: "Text" },
  color: { type: ControlType.Color, title: "Background Color" }
};

Quick start

Install the plugin first:

npm install --save-dev babel-plugin-framer-x

Then add it to your babel configuration:

{
  "plugins": ["babel-plugin-framer-x"]
}