Flow-layout-wc NPM

Flow Layout WC

The flow-layout-wc is a high performance flow layout component written using web-component

It can support running in various frameworks, such as React Vue

🌈 Demo

⚙️ Installation

npm i flow-layout-wc

scripts

<script src="https://cdn.jsdelivr.net/npm/flow-layout-wc/dist/index.iife.js"></script>

🦄 Example

🐔 Use in VanillaJS

import 'flow-layout-wc'

<flow-layout gap="10" cols="3">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</flow-layout>

🐔 Use in React

📄 App.tsx

import 'flow-layout-wc'

export default function MyApp() {
  return (
    <flow-layout gap={10} cols={3}>
      <div>01</div>
      <div>02</div>
      <div>03</div>
      <div>04</div>
      <div>05</div>
      <div>06</div>
    </flow-layout>
  )
}

🐔 Use in Vue

📄 main.ts
import 'flow-layout-wc'
📄 App.vue

<template>
  <flow-layout :gap="10" :cols="3">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
  </flow-layout>
</template>