██FR█████ █INTELL███████████

Hello everybody out there using React


This content originally appeared on DEV Community and was authored by Jonatan Mata Umaña

I always wanted to write a post like Linus Torvald’s famous Linux announcement, so here goes…

I’m doing a (free) component library for micro frontends (just a hobby, won’t be big and professional like Material-UI or Ant Design) for React 18+. This has been brewing since August, and is starting to get ready. I’d like any feedback on things people like/dislike in component libraries, as my library resembles existing ones somewhat (same basic philosophy of atomic design, among other things).

I’ve currently ported most of the components I need, and a few utilities, but it’s still very much a work in progress. This means it’s not fully tested in all scenarios yet, but I’m getting there. It should be ready for broader use in a few weeks (or months – who knows). I’d like to know what features most people would want. Any suggestions are welcome, but I won’t promise I’ll implement them 🙂

What I’ve got so far

@jonmatum/react-mfe-shell – because naming things is hard.

// This works right now:
import { SettingsProvider, Button, FormField, Input } from '@jonmatum/react-mfe-shell';

function App() {
  return (
    <SettingsProvider>
      <FormField label="Email" required>
        <Input type="email" placeholder="Enter email" />
      </FormField>
      <Button variant="primary">Submit</Button>
    </SettingsProvider>
  );
}

Basic stats: 24 components, TypeScript support, multiple integration paths (zero-config or Tailwind), and a theme system that actually works.

The real test: axisight.io

Because you have to eat your own dog food, I built axisight.io using this library. It’s a tool I’m working on, and everything you see there runs on the component library. If it works for a real application, it should work for you too.

Why I built this

I was working on micro frontend projects and kept thinking “there has to be a better way to share components between apps.” Most libraries assume you’re building one big SPA, but what if you’re not?

So I built something that works, integrates with existing setups, and actually has the components you use daily.

You’re welcome to try it if you’d like.

This is very much a work in progress, so expect some rough edges:

npm install @jonmatum/react-mfe-shell

What I’d like to know

  • What components do you rebuild constantly?
  • What annoys you about existing libraries?
  • Any micro frontend pain points?

Will this become the next big thing? Probably not. But it’s free, it’s open source, and it solves some problems I was having.

Plus, I finally got to write a post like Linus’s Linux announcement. Always wanted to do that! 😄

echo “Pura Vida & Happy Coding!”;

PS: This post format is inspired by Linus Torvalds’ famous Linux announcement in 1991.


This content originally appeared on DEV Community and was authored by Jonatan Mata Umaña