Use the best of two worlds.
Create fast, performant, native Web Components using React.
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
Powered by react-scripts
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
Direflow © 2020