Components

React components include common best practices for good performances, maintainability and ease of use. Here are some of the design decisions for the generated code.

Any question about the design decisions? Anything not matching your project practices? Please let us know! we may add an option for the flexibility you need.

Naming conventions

They are described here.

React-specific practices

Functional components

Clapy components are written using functions. Most modern React code is written using functions and hooks. It can remain simple and most libraries will provide their features as hooks rather HOC or other class-specific implementations.

Memoization

We consider components should be memoized by default, which should be beneficial in most cases. If it appears to have a negative impact on specific scenarios, the impact remains very small and memoization can be removed in that case.

Find out more here: https://stackoverflow.com/a/63405621/4053349

For this reason, all generated components are wrapped into memo().

Interfaces

All properties exposed by the component for overrides are listed in the component Props’ interface. Please refer to the instances article for more details about the overrides.

Named exports

All components use named exports. While many examples on Internet use default exports, named exports have more benefits, e.g. in terms of usage (auto-import, auto-completion from IDEs) and performance (considering ES6 modules and tree shaking).

Variable name and function name

export const Card: FC<Props> = memo(function Card(props = {}) {
  // ...
}

Card is defined twice: as the exported variable name and the inner function.

• The exported variable is required for named exports.

• The inner function is named (instead of anonymous) to name the component function, which helps showing better stack traces when debugging. This practice can be enforced by an ESLint config.

Imports ending with .js

In TypeScript, imports of other TypeScript files typically don't have extensions. E.g.:

import { Dropdown } from './Dropdown';

It's an assumption TypeScript has made in its early days, but not the final standard of EcmaScript modules. For unclear reasons (at least for me), the TypeScript transpilation to JavaScript doesn't add the .js extension.

To be able to bundle in ES module format and be compatible with the latest standards and usages around ES modules, the recommendation is to append a ".js" extension to imports (yes, even if pointing to a TypeScript file). E.g.:

import { Dropdown } from './Dropdown.js';

That's the practice Clapy has adopted in the generated code.

Annotation @figmaId

This annotation is added in a comment above the component. Please leave it as it is. In an incoming release, we will use it to map a coded component to the corresponding Figma node, e.g. for updates.