Unleash the Power of React Server Components

Seamlessly build UI libraries with React server and client components with this plugin

React server components have been around for a while, and frameworks such as Next.js have really made it easy to use them in full stack apps. However, most libraries in the ecosystem are lagging behind. Often this lag is because of unavailability of appropriate tooling for the library authors.

I am excited to announce that I have created a simple yet powerful and highly useful plugin to make library author’s job easy. In this story, I will explain why and how to use this plugin to create your next UI library that unleashes the power of React Server components and Next.js or similar frameworks.

Before you go ahead, hit that star button on the repo

GitHub - mayank1513/esbuild-react18-useclient

Why?

• Unleash the power of combining react client and server components in your libraries
• TypeScript out of the box
• Simple and tiny
• Easy to use — just add the plugin, and you are good to go

Introduction of React server components in React 18 has unlocked immense possibilities. However, library authors are not yet able to fully encash upon this potential. Many libraries, like `chakra-ui`, simply add “use client” for each component. However, much more can be unleashed when we can use both server and client components to build libraries.

Compatibility

• JavaScript/TypeScript React libraries using tsup or other builders based on esbuild

This plugin seamlessly integrates with tsup and any other builders based on esbuild. With this you can have both server and client components in your library and the plugin will take care of the rest. All you need to do is add this plugin and add "use client"; on top of client components (in your source code).

Add dependencies:

yarn add -D esbuild-react18-useclient
# OR
pnpm add -D esbuild-react18-useclient
#OR
npm install --save-dev esbuild-react18-useclient

If you are using `monorepo` or `workspaces` you can install this plugin to root using `-w` or to specific workspace using ` — filter your-package` or ` — scope your-package` for `pnpm` and `yarn` workspaces respectively.

Use with tsup

// tsup.config.ts or tsup.config.js
import { defineConfig } from "tsup";
import reactUseClient from "esbuild-react18-useclient";
export default defineConfig(options => ({
 …
 esbuildPlugins:[reactUseClient]
}));

More content at PlainEnglish.io.

Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.