Skip to content

Instantly share code, notes, and snippets.

@simonfranzen simonfranzen/Button.tsx
Last active Nov 28, 2018

Embed
What would you like to do?
FramerX Styled Component Example Button
import * as React from "react"
import { PropertyControls, ControlType } from "framer"
import styled, { css } from "styled-components"
const StyledButton = styled.button`
padding: 20px;
border-radius: 10px;
border: 0;
font-size: 2em;
${props => props.type == 'primary' && css`
color: white;
background-color: green;
`}
${props => props.type == 'secondary' && css`
color: white;
background-color: blue;
`}
`
// Define type of property
interface Props {
text: string;
type: string;
}
export class Button extends React.Component<Props> {
// Set default properties
static defaultProps = {
text: "Hello World!",
type: "primary",
}
// Items shown in property panel
static propertyControls: PropertyControls = {
text: {
type: ControlType.String,
title: "Text"
},
type: {
type: ControlType.Enum,
title: "Type",
options: ['primary', 'secondary'],
optionTitles: ['Primary Button', 'Secondary Button']
},
}
render() {
return (
<StyledButton type={this.props.type}>
{this.props.text}
</StyledButton>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.