How to Share Vue Components Between Applications

Different React components for different occasions.

Eden Ella

For me, small and specific solutions in the form of single components, make more sense than the all-in-one solutions offered by component libraries. I like to pick and choose my own components, I don’t like long documentations and I’d like to avoid meaningless updates that often break things.

A (frontend) library provides a consistent UI — an absolutely crucial thing. But, it may happen that you already have your own design system, your own UI library, and you’re looking to speed up development by finding customizable reusable components. In that case, it makes more sense to look for a single component than an entire library that houses the solution you covet, along with many other irrelevant ones. In any case, whether you’d like to create your own private collection of reusable components or to browse an endless catalog, built by the open-source community, you may want to check out Bit (Github).

Bit gives you the power to “harvest” components from any codebase and share them to a component collection in bit.dev. Components are versioned individually and can be added to a collection, one component at a time. It’s great for creating design systems, building more scalable and maintainable code, or simply sharing and collaborating on components across repositories.

React Awesome Slider delivers smooth, beautiful and highly-customizable transitions. It is lightweight (only 7k) and fully supported by all major browsers.

React Data Grid is a powerful, fast and easy-to-use component for an excel-like experience. It also includes keyboard commands, copy and pasting and many other features you would expect to see in a native spreadsheet. As mentioned earlier, react-data-grid offers a simple API that would get you using it in seconds.

Choosing between an endless selection of notification components is not an easy job. There are many excellent ones but what made CongoToast my personal favorite is (again) its elegance and simplicity. It’s a tiny package, only 4k in size, it has a simple API and a slick look that goes well with many UI designs.

Google Maps React is a pretty popular component that makes it quick and simple to place (with specific coordinates) React components on top of a google map.

React Tooltip is a highly customizable tooltip component that would be a perfect match for any UI design you may have. React Tooltip truly covers anything you may want to do with a tooltip with things like custom events, delays, “live updates” of the tooltip’s content, and much more.

React Block UI is simple to use component for disabling the user interface while indicating “loading”.

I wasn’t planning on finding the best component for the “Payment Details” category but this component is simply too awesome to leave out 😃 It is easy to use and customizable. “React Credit Cards” even displays the credit card company that matches the entered credit number.

React Markdown is a quick and easy solution for rendering markdowns (including HTML). Not much can be said about it except it does exactly what it says on the tin, and it does it well.

Many UI libraries offer their own color pickers but, Coloreact manages to provide the ultimate balance between simplicity of use and customizability — giving you great control over how it looks and behaves, without demanding too much of your time.

If you’re looking for a calendar equipped with all the frequently used features a “professional” calendar has, then React Big Calendar is the component for you. Resource scheduling, localization, custom time grids, or just the usual drag-and-drop — you’ll find them all there.

Load More Related Articles
Load More By john
Load More In Javascript

Leave a Reply

Your email address will not be published. Required fields are marked *