XtGem Forum catalog
HomeBlogAbout Me

Framer X React Native



This extension provides Framer X & React code snippets for TypeScript and ES6.

Installation

In the command palette (cmd-shift-p), select Install Extension and type Framer X Code Snippets for VS Code.

Supported languages (file extensions)

  • TypeScript React (.tsx)
  • TypeScript (.ts)
  • JavaScript React (.jsx)
  • JavaScript (.js)

The ⇥ means the TAB → key.

Framer X Templates

PrefixSnippet
xproperty ⇥'import { addPropertyControls, ControlType } from 'framer'.'
xframe ⇥'import { Frame } from 'framer'

Framer X Property Controls

PrefixSnippet
xcontrols ⇥'static propertyControls: PropertyControls = {}'
xstring ⇥'text: {type: ControlType.String, .}'
xarray ⇥'children: {type: ControlType.Array, .}'
xcolor ⇥'color: {type: ControlType.Color, .}'
xcomponent ⇥'children: {type: ControlType.ComponentInstance, .}'
ximage ⇥'image: {type: ControlType.Image, .}'
xnumber ⇥'number: {type: ControlType.Number, .}'
xfusednum ⇥'fusedNumber: {type: ControlType.FusedNumber, .}'
xbool ⇥'boolean: {type: ControlType.Boolean, .}'
xsegenum ⇥'segment: {type: ControlType.SegmentedEnum, .}'
xenum ⇥'enum: {type: ControlType.Enum, .}'
xfile ⇥'file: {type: ControlType.File, .}'
xhideprop ⇥'.hidden(props) {return props.toggle false}'

React

PrefixSnippet
ximp ⇥'import { ModuleName } from 'module'

React Hooks

PrefixSnippet
xus ⇥useState Hook
xue ⇥useEffect Hook
xuc ⇥useContext Hook
xur ⇥useReducer Hook
xucb ⇥useCallback Hook
xum ⇥useMemo Hook
xuref ⇥useRef Hook
xuih ⇥useImperativeHandle Hook
xule ⇥useLayoutEffect Hook
xudv ⇥useDebugValue Hook

Snippet list

Framer X Snippets:

  • Framer X Functional Component (Outdated pattern)
  • Framer X Class Component (Outdated pattern)
  • Import Frame component

Framer X Property Controls:

  • Property Control Static Method
  • Control Type Boolean
  • Control Type Number
  • Control Type String
  • Control Type Color
  • Control Type Image
  • Control Type File
  • Control Type Enum
  • Control Type SegmentedEnum
  • Control Type FusedNumber
  • Hide Control Types Pattern
  • Control Type ComponentInstance
  • Control Type Array

React Custom Hooks

PrefixSnippet
xui ⇥useIdentifier Hook
xusv ⇥useStaticValue Hook

Utility Functions

PrefixSnippet
xrc ⇥'function randomColor() {.}'

Tips & Tricks

To get the most of this extension I recommend also to install:

  • ES7 React/Redux/React-Native/JS snippets, comes with more than +100 snippets.
  • JavaScript Snippet Pack, comes with a variety of useful snippets for debugging (cl ⇥ console.log) and traditional DOM manipulation methods.

Credits

New React Hooks snippets contains code samples from the following projects:

New snippet prefixes inspired by Aroa Gil Bo, Framer X Property Control Template & Snippets

Feedback & Contributions

Any type of feedback will be extremely useful. I encourage you to write a review.

Have you found something wrong/missing or you just want to bring an idea? Please open a new issue and tell me more about it!

Created at 2021-01-20 08:39
0 Rate up Star
Back to posts
This post has no comments - be the first one!

UNDER MAINTENANCE