UiZoo.js — A Dynamic React Components Library

Noam Elboim
Jul 27, 2017 · 4 min read

How many times have you created a new component just to find out later that someone else has already done the exact same thing? How many times have you discovered that the “generic” component you wanted to use was actually tightly-coupled to the environment it was developed for? Well, no more! Introducing — UiZoo.js.

An example of how a component looks in UiZoo.js

UiZoo.js showcases your components, letting you develop in a sterile environment and browse what you already have and can use, to make better use of your components. And all this with almost no effort!

This tool can be used for development, for product managers to know what is possible, and for UX to see what we have so far. It can also be a playground for cooperation between all of the above.

Background

It became a necessity for us so rapidly that we felt we had to share it. It just makes component-creating life so much easier!

Currently, every React component in the MyHeritage website is developed using UiZoo.js.

The following GIF demonstrates how easily a component can be created in UiZoo.js — how changes in the tool reflect your component, and vice versa:

Trying out a component called RaisedButton, first loading an example and then executing an onClick function

How it works

We use JSDoc parsing from your component’s documentation to show details on the component page, including description, possible props and full JSX examples. We used a well known JSDoc parser called Doctrine and then created a standalone version that we can use in a browser. In this way, we support each and every JSDoc tag imaginable.

For example

In the following code snippet, you can see how UiZoo.js compiles and executes examples dynamically:

Factory to create a function with context to receive JSX string as input and returns a React element

Once we have a React element, we can use the power of JSX to choose a type at runtime and render the example, as seen in this code snippet:

ComponentNode is decided at runtime and rendered with chosen props

Props selectors

In the following code snippet, you can see we choose the selector based on the prop type:

Deciding on the best selector for the job

In this GIF, you can see a component called RaisedButton and what happens when the JSDoc of a prop contains literal values, like “pink” and ”purple.”

Changing types in a prop to get a custom selector (ParamSelectorVariant)

JSDoc Block Tags and their meanings

@name (synonyms: @class, @type)

@module (synonyms: @namespace, @memberOf)

@description (synonyms: @summary, @desc, @classdesc)

@example

@prop (synonyms: @property, @arg, @argument, @param, @member)

What’s the difference between UiZoo.js and Storybook?

We created UiZoo.js, however, because we already had good JSDoc documentation on all of our components and wanted to use it to create the “stories” for us. Also, we maintain JSDoc anyway, so using UiZoo.js ensures that we maintain the most updated components version and variations automatically.

Contributing

Contributions and feedback are very welcome! Please check our guidelines if you want to contribute.

In Conclusion

More than that, it enables us to see what we have without having to go through thousands of lines of code only to figure out that the component you have been working on is too tightly coupled to the environment it was developed on for your current functionality.

Try our live example here.

MyHeritage Engineering

MyHeritage helps you discover your family history and reveal the secrets from your DNA. Trusted by millions of families, we provide an easy way to share family stories, past and present, and treasure them for generations to come. https://careers.myheritage.com/

Noam Elboim

Written by

Front End Engineer @Facebook 🦔 | @elNoam

MyHeritage Engineering

MyHeritage helps you discover your family history and reveal the secrets from your DNA. Trusted by millions of families, we provide an easy way to share family stories, past and present, and treasure them for generations to come. https://careers.myheritage.com/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade