Ask HN: Tips for building a JavaScript lib to integrate with React?

1 points by smcgraw 8 years ago | 2 comments

I'm building a UI component library (similar to jQuery UI) that provides vanilla JS components as an API to manipulate the DOM. All well and good.

However...

I'm also wanting to write it such that a modern UI library / framework (e.g. React) can extend this library as a wrapper, and in essence, 'recreate' the same component library API out of React components instead of raw JS ones. So there's this vanilla JS library doing most of the work, but a React wrapper on top as well to help those on a React stack.

I've read the React docs[1] on how to integrate React with a plugin that you can't control - which were very helpful- however, I'm looking for best practices on how to build a plugin (obviously that I can control) that plays as nicely as possible with React.

I realize this is pretty high-level stuff, but any resources, tips from experience, or examples of JS libraries like this (that is, created with framework integration in mind from the start) that you've seen or worked on / with would really help!

[1] https://reactjs.org/docs/integrating-with-other-libraries.html#integrating-with-dom-manipulation-plugins

kgenus 8 years ago |

I do not question if it is high-level as much as I do its practicality. jQuery manipulates the DOM, React manipulates a virtual DOM pushing the changes to the client. That's about as vanilla as it gets.

Could you be a little more descriptive? If you're talking about creating a more visually appealing UI/UX experience, are you talking about creating a framework that more effectively handles UI component state?

Maybe I'm missing something and am way off base.

smcgraw 8 years ago | |

Great question. So sorry for the confusion- I only used jQuery UI as an example, but perhaps it wasn't the best one. I'm trying to create a UI component library in vanilla JS/CSS that can be extended for use in React.

So I'm looking to create something very similar to Material Design, a vanilla JS/CSS library (https://material.io/components/web/), which is extended and used in Material UI, a React component library (http://www.material-ui.com/).

I guess I'm essentially asking: if I were to build Material Design, knowing full well I'd use it later to create something like Material UI, are there any recommendations out there for building the vanilla lib to make sure I don't shoot myself in the foot integrating that vanilla lib into the React lib?