Skip to content

Instantly share code, notes, and snippets.

@netgfx

netgfx/TextWrapper.tsx

Created November 28, 2022 16:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save netgfx/74a5ca21e40ea8b47bba18bb5e1f8963 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save netgfx/74a5ca21e40ea8b47bba18bb5e1f8963 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. netgfx created this gist Nov 28, 2022.
    60 changes: 60 additions & 0 deletions TextWrapper.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,60 @@
    // Welcome to Code in Framer
    // Get Started: https://www.framer.com/docs/guides/

    import { addPropertyControls, ControlType } from "framer"
    import { ScrambleText } from "./ScrambleText.tsx"

    /**
    * These annotations control how your component sizes
    * Learn more: https://www.framer.com/docs/guides/auto-sizing
    *
    * @framerSupportedLayoutWidth auto
    * @framerSupportedLayoutHeight auto
    */
    export default function TextWrapper(props) {
    // This is a React component containing an Example component
    // - Replace <Example /> with your own code
    // - Find inspiration: https://www.framer.com/developers/

    return (
    <div
    style={{
    ...containerStyle,
    fontSize: props.size,
    color: props.color,
    }}
    >
    <ScrambleText size={10}>{props.text}</ScrambleText>
    </div>
    )
    }

    addPropertyControls(TextWrapper, {
    text: {
    type: ControlType.String,

    title: "Text",
    defaultValue: "Lorem Ipsum dolor si amet",
    },
    size: {
    title: "text size",
    type: ControlType.Number,
    defaultValue: 22,
    },
    color: {
    title: "text color",
    type: ControlType.Color,
    defaultValue: "#000",
    },
    })

    // Styles are written in object syntax
    // Learn more: https://reactjs.org/docs/dom-elements.html#style
    const containerStyle = {
    height: "100%",
    display: "flex",

    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden",
    }