https://github.com/eschaefer/babel-plugin-framer-x

A Babel plugin to remove Framer X code from your React components.
https://github.com/eschaefer/babel-plugin-framer-x

Last synced: 3 months ago
JSON representation

A Babel plugin to remove Framer X code from your React components.

• Host: GitHub
• URL: https://github.com/eschaefer/babel-plugin-framer-x
• Owner: eschaefer
• Created: 2018-10-06T13:13:22.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-10-08T18:43:34.000Z (about 6 years ago)
• Last Synced: 2024-07-17T22:15:35.263Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 152 KB
• Stars: 15
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-babel - babel-plugin-framer-x - Removes Framer X markup from your components. Lets you use Framer X components in a Storybook or real application. (Plugins / React)

README

        
# `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](http://storybook.js.org/) or [Styleguidist](https://react-styleguidist.js.org/).

- 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.

```javascript

// 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:

```JSON

{

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

}

```