stencil-framer-comptest v1.0.2
Framer X / StencilJS Components
This repository is an example of a few components based on the framer-bridge-starter-kit component library, but built entirely in StencilJS Web Components.
These components can be used within any Web Framework, but were designed to illustrate the workflow between maintaining a Web Component based Design System in Framer X.
Components
This package contains 4 main components:
<my-button />
A flexible button with multiple props to change the appearance.
| Property | Type | Description | Default |
|---|---|---|---|
| text | string | Button text | Download App |
| fluid | boolean | Width of button | true |
| disabled | boolean | Button disabled state | false |
| kind | enum | Button Kind | default |
<my-input />
An input field with props to change the appearance.
| Property | Type | Description | Default |
|---|---|---|---|
| value | string | Input value | |
| placeholder | string | Input placeholder | Email |
| disabled | boolean | Input disabled state | false |
| error | boolean | Input error state | false |
<my-toggle />
A usable toggle with props to change it's state.
| Property | Type | Description | Default |
|---|---|---|---|
| disabled | boolean | Toggle disabled state | false |
| on | boolean | Toggle on state | false |
<my-tooltip />
A tooltip with props to change the appearance.
| Property | Type | Description | Default |
|---|---|---|---|
| arrow | enum | Arrow direction | left |
| text | string | Tooltip text | Component |
| error | boolean | Tooltip error state | false |
Using Components
Follow the steps below to use them in your project.
Script Tag in HTML
- Put this tag
<script src='https://unpkg.com/stencil-framer-components/dist/framerxcomponents.js'></script>in the head of your index.html. You can use a different version by specifiying the verion following this doc. - Use the custom elements listed above anywhere in your template, JSX, HTML, etc.
Framer X
Check out this starter kit to learn more about how these components are maintained in Framer X, and see a working example of these living in a Framer X project.
Framer X uses React under the hood, but that doesn't mean you can't use you custom Web Components. The easiest way to include your components in Framer X is to add the script tag through a custom React Hook. If you're new to React, a good place to start is here.
- Add this Gist to the
codefolder of your Framer X Project. - Add the custom hook + script URL to your component file. The script URL for these components is
"https://unpkg.com/stencil-framer-components/dist/framerxcomponents.js". - Use the custom elements in the render body of the Component.
Node_Modules
- Run
npm install stencil-framer-components --save - Import the StencilJS component into the file you wish to use it in by adding
import my-button from "stencil-framer-components"at the top. - Use the custom elements listed above anywhere in your template, JSX, HTML, etc.
5 years ago