Direflow

Use the best of two worlds.
Create fast, performant, native Web Components using React.

→ Get Started

View on Github

Open-Source MIT License. GitHub

How it works

Use the power of React to create your component

Build it, then use it and share it as a native Web Component

Create

React

Build

Direflow

Consume

Web Component

How it's used

✔️ Create rich and completely self-contained Micro Frontends

✔️ Build entire UI Libraries and use it across any UI frameworks & libraries

Easy to use

Direflow makes it really easy to get started developing!

Create your first Direflow Component in a matter of minutes ⚡️

Configure component

Use as native HTML

Setting properties

Dispatching events

Subscribing to events

Customize Webpack

Configure Direflow

Access the DOM node

import { DireflowComponent } from 'direflow-component';
import App from './direflow-component/App';

DireflowComponent.create({

  // React component to use
  component: App,

  // Configuration - tagname of the custom element
  configuration: {
    tagname: 'crypto-cart',
  }
});

import { DireflowComponent } from 'direflow-component';
import App from './direflow-component/App';

DireflowComponent.create({

  // React component to use
  component: App,

  // Configuration - tagname of the custom element
  configuration: {
    tagname: 'crypto-cart',
  }
});

Get started

Install Direflow and set up a new project.

Enjoy the smooth ride 🚀

npm i -g direflow-cli

Copy

direflow create

Copy

cd <project-name>

Copy

npm install

Copy

npm start

Copy

→ Get Started

Your help is wanted!
If you find a bug or have a nice idea or a suggestion:Please create an issue on Direflow's GitHub page.
If you have improved Direflow in any way, please create a Pull Request.It is greatly appreciated 💜
Please let us know if you build something cool with Direflow!It would be awesome to showcase it on our webpage 🤙

Contribute