willba-component-library v0.2.80

Description

Willba Component Library is a custom UI component collection that can be utilized across multiple platforms. It is available as an npm package, or can be used directly through scripts.

React usage

Install the package:

// with npm
npm install willba-component-library

// with yarn
yarn add willba-component-library

Import and use the package:

import React from 'react'
import ReactDOM from 'react-dom'
import { FilterBar } from 'willba-component-library'

function App() {
  return (
    <FilterBar
      redirectUrl={'https://store.vendor.willba.app/'}
      language={'en'}
      calendarOffset={{
        rooms: 7,
        events: -1,
      }}
      mode={'dark'}
      ageCategories={[
        {
          id: '2',
          name: 'Alle 6 vuotiaat',
          minVal: 0,
          sortOrder: 3,
        },
        {
          id: '3',
          name: '6-16 vuotiaat',
          minVal: 0,
          sortOrder: 2,
        },
        {
          id: '1',
          name: 'Aikuiset',
          minVal: 1,
          sortOrder: 1,
        },
      ]}
      tabs={[
        {
          path: '/rooms',
          default: true,
          order: 2,
        },
        {
          path: '/events',
          default: false,
          order: 1,
        },
      ]}
    />
  )
}

ReactDOM.render(<App />, document.querySelector('#app'))

Script usage

<div
  id="will-filter-bar"
  style="display: flex; justify-content: center; margin-bottom: 50px"
></div>

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.2.9/lib/index.umd.js"></script>

<script>
  const filterBarElement = React.createElement
  const filterBarContainer = document.getElementById('will-filter-bar')
  const WillFilterBar = WillbaComponentLibrary.FilterBar
  const root = ReactDOM.createRoot(filterBarContainer)

  root.render(
    filterBarElement(WillFilterBar, {
      redirectUrl: 'https://store.vendor.willba.app/',
      language: 'en',
      palette: {
        primary: '#2a5a44',
        secondary: '#2a5a44',
      },
      calendarOffset: {
        rooms: 7,
        events: -1,
      },
      mode: 'dark',
      ageCategories: [
        {
          id: '2',
          name: 'Alle 6 vuotiaat',
          minVal: 0,
          sortOrder: 3,
        },
        {
          id: '3',
          name: '6-16 vuotiaat',
          minVal: 0,
          sortOrder: 2,
        },
        {
          id: '1',
          name: 'Aikuiset',
          minVal: 1,
          sortOrder: 1,
        },
      ],
      tabs: [
        {
          path: '/rooms',
          default: true,
          order: 2,
        },
        {
          path: '/events',
          default: false,
          order: 1,
        },
      ],
    })
  )
</script>

Props of FilterBar