WC Flow Layout

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

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

🌈 Demo

• https://huodoushigemi.github.io/wc-flow-layout/
• codepen — Basic usage
• codepen — Photo wall
• Vue SFC Playground
• SolidJs Playground

⚙️ Installation

• npm

npm i wc-flow-layout

• scripts

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

🦄 Example

🐔 Use in VanillaJS

import 'wc-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>
</wc-flow-layout>

🐔 Use in React

// App.tsx
import 'wc-flow-layout'

export default function MyApp() {
  return (
    <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>
    </wc-flow-layout>
  )
}

🐔 Use in Vue

// main.ts
import 'wc-flow-layout'

<!-- App.vue -->
<template>
  <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>
  </wc-flow-layout>
</template>

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: { isCustomElement: (tag) => tag.startsWith('wc-') }
      },
    })
  ],
})

📄 Props

| Name | Type | Default | Description | | ---- | -------- | ------- | ---------------------- | | cols | number | 2 | Number of columns | | gap | number | 4 | Interval between cells |

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

👏 Contributing

If you have any questions or requests or want to contribute, please write the issue or give me a Pull Request freely.