Code Component
Framer X

Define a code component that does not appear in the Components panel

How can we define a code component for internal use only so that it does not appear in the Components panel? I’ve found two ways so far. Hint: method 2 seems better so far.

Method 1: Default export

Instead of exporting the component as a “named export”, we can make it a “default export”, i.e. by adding a keyword default after export:

export default class NoVisibleComp extends React.Component<Props> {

When we use this component, we’d need to import it differently. So instead of

import { NoVisibleComp } from './NoVisibileComp`

we do:

import NoVisibleComp from './NoVisibleComp`

However, this generates a warning in the console. This seems benign but still annoying.

default export warning

Method 2

class Comp extends React.Component<Props> {

export const NoVisibleComp = Comp

This seems a better way so far. At least it does not generate that warning, and we can continue to import the component as a named import.

import { NoVisibleComp } from './NoVisibileComp`

PS: If you find this tip difficult to understand, check out this course I prepared for you, where concepts are explained in a more digestible way. No programming experience required!

PPS: See other pro tips, or share / request a new tip.

© 2019 jimu Labs, Inc.