Learn how to wrap a third-party widget into a React component. We’ll cover setting up the mapping between React props and the widget’s configuration options…

Materialize

Bobby Iliev

DevOps

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Learn how to wrap a vanilla JavaScript package for use in React, using the example of ag-Grid. Understand the purpose of creating a framework-specific wrapper, the difference between using ag-Grid as a vanilla JavaScript widget and as a React component, and how to configure a React specific datagrid wrapper.

How to Wrap a Vanilla JavaScript Package for Use in React

Step 1 — Understanding the JavaScript Widget

Step 2 — Determining What a Wrapper Component Should Do

Step 4 — Synchronizing Grid Properties Updates

<p>It depends on the package.
I’ve done it for my Tagify lib and there are many unexpected things I had to solve. Here’s my wrapper:</p>
<p><a href="https://github.com/yairEO/tagify/blob/master/src/react.tagify.jsx" target="_blank" rel="noopener nofollow">https://github.com/yairEO/tagify/blob/master/src/react.tagify.jsx</a></p>
