└── README.md


/README.md:
--------------------------------------------------------------------------------
  1 | # Framer X Cookbook
  2 | This is a list of short and useful Framer X tips to build impressive prototypes.
  3 | 
  4 | <br/>
  5 | 
  6 | - [How to share data between components using override?](#how-to-share-data-between-components-using-override)
  7 | - [How to detect if a component has children nodes?](#how-to-detect-if-a-component-has-children-nodes)
  8 | - [How to import JSON files with data?](#how-to-import-json-files-with-data)
  9 | - [How to use a design component structure inside your code component?](#how-to-use-a-design-component-structure-inside-your-code-component)
 10 | - [How to wrap an installed component with your code component?](#how-to-wrap-a-installed-component-with-your-code-component)
 11 | - [How to use REST API inside a code component?](#how-to-use-rest-api-inside-a-code-component)
 12 | - [How to use GraphQL API inside a code component?](#how-to-use-graphql-api-inside-a-code-component)
 13 | - [How to install an npm package?](#how-to-install-an-npm-package)
 14 | 
 15 | <br/>
 16 | 
 17 | #### How to share data between components using override?
 18 | ```js
 19 | import { Data, Override } from "framer"
 20 | 
 21 | const data = Data({
 22 |     text: "Overview",
 23 | })
 24 | 
 25 | export const TextChange: Override = props => {
 26 |     return {
 27 |         onValueChange: (text: string) => {
 28 |             data.text = text
 29 |         }
 30 |     }
 31 | }
 32 | 
 33 | export const GetText: Override = el => {
 34 |     let page = 0
 35 |     
 36 |     if (data.text == "Overview") page = 1
 37 |     if (data.text == "Interaction") page = 2
 38 | 
 39 |     return {
 40 |         page: page,
 41 |     }
 42 | }
 43 | 
 44 | ```
 45 | 
 46 | #### How to detect if a component has children nodes?
 47 | ```js
 48 | const hasChildren = (children: React.ReactNode) =>
 49 |   !!React.Children.count(children);
 50 | ```
 51 | 
 52 | #### How to import JSON files with data?
 53 | ```js
 54 | // Add the follow code in tsconfig.json file
 55 | "compilerOptions": {
 56 |   ...
 57 |   "resolveJsonModule:" true
 58 | }
 59 | ```
 60 | #### How to use a design component structure inside your code component?
 61 | ```js
 62 |   import { componentName } from './canvas'; 
 63 | ```
 64 | #### How to wrap a installed component with your code component
 65 | ```js
 66 | import { Component } from '@framer/componentname/code/File.js'
 67 | 
 68 | static defaultProps = { 
 69 |   ...Component.defaultProps,
 70 | }
 71 | 
 72 | // Reuse the propertyControls from the imported component
 73 | static propertyControls: PropertyControls = { 
 74 |   ...Component.propertyControls,
 75 | } 
 76 | 
 77 | render() { 
 78 |   return <Component {...this.props}>
 79 | }
 80 | ```
 81 | #### How to use REST API inside a code component:
 82 | ```js
 83 | loadData = async () => {
 84 |   const url = "http://url"
 85 |   const result = await fetch(url)
 86 |   const result = await result.json()
 87 |   this.setState({ result })
 88 | }
 89 | 
 90 | componentDidMount = () => { 
 91 |   this.loadData();
 92 | };
 93 | ```
 94 | #### How to use GraphQL api inside a code component:
 95 | ```js
 96 | import { request } from 'graphql-request'
 97 | 
 98 | loadData = async () => {
 99 |   const url = "http://url"
100 |   const query =`
101 |   {
102 |     query { 
103 |       fields
104 |     }	
105 |   }
106 |   `
107 |   const result = await request(url, query)
108 |   this.setState({ result })
109 | }
110 | 
111 | componentDidMount = () => { 
112 |   this.loadData();
113 | };
114 | ```
115 | #### How to install a npm package
116 | 
117 | 1. File > Show Project Folder
118 | 2. Open the path in terminal and install the the package
119 | 


--------------------------------------------------------------------------------