How can you use Preact components inside of a React project?

[adamzerner]

I am currently working on RFUI, a component library similar to Chakra UI. I love Deno's web framework, Fresh, which uses Preact. I plan on using it myself on my projects for the foreseeable future, and I'd like RFUI to work well with it.

However, I'd also like it to work with people who are using React, as that's a huge audience. I'm not sure how that'd work though. Looking at this blog post, it seems tricky.

Where they differ greatly is what that <h1>I am a header</h1> compiles to. For React, it's a createElement() call. For Preact, it's a h() call.

Are there any guides or documentation for how to approach this sort of situation?

(This seems like an important question. I expect that people would be much more motivated to write Preact-first components if it was clearly explained how people in React projects would be able to use those components. Although maybe that is misguided. Maybe it isn't actually important to be able to write Preact-first components since Preact makes it easy to use React-first components.)

[marvinhagemeister]

That blog post from 2018 about the different JSX factories is outdated. Since we launched Preact 10.x in 2019 Preact ships with both the h() and createElement() factory out of the box. The main difference when authoring component libraries for React or Preact are the imports. For React you'll be importing from react and for Preact that will be preact or preact/hooks. Most folks who dual publish for React and Preact publish separate npm packages where the imports are rewritten accordingly. That's pretty much all there is to it.

[adamzerner]

Oh, awesome! Thanks Marvin.

[rschristian]

Someone asked me for a demo of this a while back so I wrote up this: https://github.com/rschristian/react-preact-lib

Shows off separate builds for React and Preact in the same package, rather than separate, just as another option if you didn't want to split them out.

[adamzerner]

@rschristian Thanks, I appreciate that. I'll take a look.

[adamzerner]

@marvinhagemeister I am running into an issue actually.

For my Preact components I have stuff like JSX.HTMLAttributes<HTMLDivElement> for my types. But JSX comes from Preact, so for React components I'll need a different type.

Looking at stuff like this, it looks like React.HTMLProps<HTMLDivElement> would be the way to go. However, the following doesn't work.

import React from "react";

const Example = ({ ...rest }: React.HTMLProps<HTMLDivElement>) => {
  return <div {...rest}>Example</div>;
};

It leads to the following error:

Type '{ children: string; accept?: string | undefined; acceptCharset?: string | undefined; action?: string | undefined; allowFullScreen?: boolean | undefined; allowTransparency?: boolean | undefined; ... 362 more ...; key?: Key | ... 1 more ... | undefined; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
  Types of property 'contentEditable' are incompatible.
    Type '"plaintext-only" | Booleanish | "inherit" | undefined' is not assignable to type '"" | Booleanish | "plaintext-only" | SignalLike<"" | Booleanish | "plaintext-only" | undefined> | undefined'.deno-ts(2322)
Type '{ children: string; accept?: string | undefined; acceptCharset?: string | undefined; action?: string | undefined; allowFullScreen?: boolean | undefined; allowTransparency?: boolean | undefined; ... 362 more ...; key?: Key | ... 1 more ... | undefined; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
  Types of property 'contentEditable' are incompatible.
    Type '"plaintext-only" | Booleanish | "inherit" | undefined' is not assignable to type '"" | Booleanish | "plaintext-only" | SignalLike<"" | Booleanish | "plaintext-only" | undefined> | undefined'.
      Type '"inherit"' is not assignable to type '"" | Booleanish | "plaintext-only" | SignalLike<"" | Booleanish | "plaintext-only" | undefined> | undefined'.deno-ts(2322)

At first I thought this wasn't a Fresh-specific problem, but after asking this question, I have come to suspect it is. That error doesn't happen in a Remix app or on StackBlitz.

[marvinhagemeister]

Good catch, looks like we're missing the "inherit" value in our types. Made a PR #4242