1.0.4 • Published 2 years ago

@eventjet/react-seatmaps v1.0.4

Weekly downloads
28
License
MIT
Repository
-
Last release
2 years ago

@eventjet/react-seatmaps

This package provides react components to render seatmaps in a ticketing system.

Installation

  yarn add @eventjet/react-seatmaps

Simple Usage Example - Volume

import React from 'react';
import { Volume } from '@eventjet/react-seatmaps';
const component = () => (
    <Volume
      x={0},
      y={0},
      width={400},
      height={400},
      color='#808080',
      disabled={false}
      active={false}
      label="Seat 1"
  />
);

Usage Example - Volumes + SeatCountBadge

SeatCountBadge only works with Volumes at the moment

SeatCountBadge on Rectangular Volume

import React from 'react';
import { Volume } from '@eventjet/react-seatmaps';
const component = () => (
  <Volume
      x={0},
      y={0},
      width={400},
      height={400},
      color='#808080',
      disabled={false}
      active={false}
      label="Seat 1"
  >
      <SeatCountBadge containerProps={{ width: 400 }} count={200} />
  </Volume>
);

SeatCountBadge on Ellipse Volume

import React from 'react';
import { Volume } from '@eventjet/react-seatmaps';
const component = () => (
  <Volume
      x={0},
      y={0},
      width={400},
      height={200},
      color='#808080',
      disabled={false}
      active={false}
      label="Seat 1"
      shape={'ellipse'}
  >
      <SeatCountBadgeOnEllipse
          containerProps={{ width: 400 }}
          count={200}
          color="#ff9900"
      />
  </Volume>
);

SeatCountBadge on a round Volume

import React from 'react';
import { Volume } from '@eventjet/react-seatmaps';
const component = () => (
  <Volume
      x={0},
      y={0},
      width={400},
      height={400},
      color='#808080',
      disabled={false}
      active={false}
      label="Seat 1"
      shape={'ellipse'}
  >
      <SeatCountBadgeOnEllipse
          containerProps={{ width: 400 }}
          count={200}
          color="#ff9900"
      />
  </Volume>
);
1.0.4

2 years ago

1.0.4-beta.0

2 years ago

1.0.2

2 years ago

1.0.3

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

0.4.3

2 years ago

0.4.2

2 years ago

0.4.1

3 years ago

0.3.1-8

3 years ago

0.3.1-7

3 years ago

0.2.0-alpha.1

3 years ago

0.3.1-12

3 years ago

0.3.1-9

3 years ago

0.3.1-10

3 years ago

0.3.1-0

3 years ago

0.3.1-3

3 years ago

0.3.0

3 years ago

0.2.0

3 years ago

0.1.19

3 years ago

0.4.0

3 years ago

0.3.0-alpha.1

3 years ago

0.1.17

4 years ago

0.1.16

5 years ago

0.1.14

5 years ago

0.1.15

5 years ago

0.1.13-beta.1

5 years ago

0.1.13

5 years ago

0.1.12

5 years ago

0.1.12-beta-5

5 years ago

0.1.12-beta-4

5 years ago

0.1.12-beta-3

5 years ago

0.1.12-beta-1

5 years ago

0.1.12-beta-2

5 years ago

0.1.12-beta

5 years ago

0.1.11

5 years ago

0.1.10

5 years ago

0.1.8

5 years ago

0.1.9

5 years ago

0.1.7

6 years ago

0.1.6

6 years ago

0.1.5

6 years ago

0.1.3

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago