One of Reflex's most powerful features is the ability to wrap React components and take advantage of the vast ecosystem of React libraries.

If you want a specific component for your app but Reflex doesn't provide it, there's a good chance it's available as a React component. Search for it on npm, and if it's there, you can use it in your Reflex app. You can also create your own local React components and wrap them in Reflex.

Once you wrap your component, you publish it to the Reflex library so that others can use it.

Simple components that don't have any interaction can be wrapped with just a few lines of code.

Below we show how to wrap the Spline library can be used to create 3D scenes and animations.

Similar to the Spline example we start with defining the library and tag. In this case the library is react-colorful and the tag is HexColorPicker.

We also have a var color which is the current color of the color picker.

Since this component has interaction we must specify any event triggers that the component takes. The color picker has a single trigger on_change to specify when the color changes. This trigger takes in a single argument color which is the new color.

There are some libraries on npm that are not do not expose React components and therefore are very hard to wrap with Reflex.

A library like spline below is going to be difficult to wrap with Reflex because it does not expose a React component.

You should look out for JSX, a syntax extension to JavaScript, which has angle brackets (<h1>Hello, world!</h1>). If you see JSX, it's likely that the library is a React component and can be wrapped with Reflex.

If the library does not expose a react component you need to try and find a JS React wrapper for the library, such as react-spline.

In the next page, we will go step by step through a more complex example of wrapping a React component.