More React Libraries

Here we wrap the AG Charts library from the NPM package ag-charts-react.

In the react code below we can see the first 2 lines are importing React and ReactDOM, and this can be ignored when wrapping your component.

We import the AgCharts component from the ag-charts-react library on line 5. In Reflex this is wrapped by library = "ag-charts-react" and tag = "AgCharts".

Line 7 defines a functional React component, which on line 26 returns AgCharts which is similar in the Reflex code to using the chart component.

Line 9 uses the useState hook to create a state variable chartOptions and its setter function setChartOptions (equivalent to the event handler set_chart_options in reflex). The initial state variable is of type dict and has two key value pairs data and series.

When we see useState in React code, it correlates to state variables in your State. As you can see in our Reflex code we have a state variable chart_options which is a dictionary, like in our React code.

Moving to line 26 we see that the AgCharts has a prop options. In order to use this in Reflex we must wrap this prop. We do this with options: rx.Var[dict] in the AgCharts component.

Lines 31 and 32 are rendering the component inside the root element. This can be ingored when we are wrapping a component as it is done in Reflex by creating an index function and adding it to the app.

In this example we are wrapping the React Leaflet library from the NPM package react-leaflet.

On line 1 we import the dynamic function from Next.js and on line 21 we set ssr: false. Lines 4 and 6 use the dynamic function to import the MapContainer and TileLayer components from the react-leaflet library. This is used to dynamically import the MapContainer and TileLayer components from the react-leaflet library. This is done in Reflex by using the NoSSRComponent class when defining the component. There is more information of when this is needed on the Dynamic Imports section of this page.

It mentions in the documentation that it is necessary to include the Leaflet CSS file, which is added on line 2 in the React code below. This can be done in Reflex by using the add_imports method in the MapContainer component. We can add a relative path from within the React library or a full URL to the CSS file.

Line 4 defines a functional React component, which on line 8 returns the MapContainer which is done in the Reflex code using the map_container component.

The MapContainer component has props center, zoom, scrollWheelZoom, which we wrap in the MapContainer component in the Reflex code. We ignore the style prop as it is a reserved name in Reflex. We can use the rename_props method to change the name of the prop, as we will see in the React PDF Renderer example, but in this case we just ignore it and add the width and height props as css in Reflex.

The TileLayer component has a prop url which we wrap in the TileLayer component in the Reflex code.

Lines 24 and 25 defines and exports a React functional component named Home which returns the MapComponent component. This can be ignored in the Reflex code when wrapping the component as we return the map_container component in the index function.

In this example we are wrapping the React renderer for creating PDF files on the browser and server from the NPM package @react-pdf/renderer.

This example is similar to the previous examples, and again Dynamic Imports are required for this library. This is done in Reflex by using the NoSSRComponent class when defining the component. There is more information on why this is needed on the Dynamic Imports section of this page.

The main difference with this example is that the style prop, used on lines 20, 21 and 24 in React code, is a reserved name in Reflex so can not be wrapped. A different name must be used when wrapping this prop and then this name must be changed back to the original with the rename_props method. In this example we name the prop theme in our Reflex code and then change it back to style with the rename_props method in both the Page and View components.