Skip to content

Instantly share code, notes, and snippets.

@addisonschultz
Last active July 15, 2023 23:17
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save addisonschultz/23df9e22cc6857383f1e830f52c16645 to your computer and use it in GitHub Desktop.
Save addisonschultz/23df9e22cc6857383f1e830f52c16645 to your computer and use it in GitHub Desktop.
Reuse Property Controls easily in Framer X
import { ControlType, PropertyControls } from "framer";
export function generatePropertyControls(
options: {
hidden?: (props: any) => boolean;
omittedProperties?: string[];
} = {}
): PropertyControls {
const properties: PropertyControls = {
// Property Controls go here
};
if (!!options.omittedProperties) {
return Object.keys(properties).reduce<PropertyControls>((acc, key) => {
if (options.omittedProperties.indexOf(key) === -1) {
acc[key] = properties[key];
}
return acc;
}, {});
}
return properties;
}
@addisonschultz
Copy link
Author

addisonschultz commented Jan 2, 2020

Usage in a component:

import * as React from "react";
import { Frame, addPropertyControls, ControlType } from "framer";
import { generatePropertyControls } from "./path/to/file/above"

export function Component(props) {
     return <div />
}

addPropertyControls(Component, {
   ...generatePropertyControls(
         hidden: props => props.someBooleanProp === true,
         omittedProperties: ["propertyToOmit"]
   )
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment