react-frieze

Installation

npm install react-frieze

Usage

import React from 'react'
import Frieze from 'react-frieze'

const items = [
  {
    start: 30,
    end: 40,
    input: '10€'
  },
  {
    start: 56,
    end: 68,
    input: '3€'
  },
  {
    start: 90,
    end: 100,
    input: '12€'
  }
]

const itemScale = {
  min: 0,
  max: 100,
  minSize: 5,
  snap: 1,
}

const MyFrieze = (props) =>
  <Frieze
    items={items}
    itemScale={itemScale}
    onChange={(nextItems) => console.log(nextItems)}
    onSelect={(itemIndex) => console.log(itemIndex)}
  />

Documentation

type Item = {
  start: number,
  end: number,
  input: any,
}

type Scale = {
  min: number,
  max: number,
  minSize?: number,
  snap?: number,
  step?: number,
  format?: (value: number) => any,
  parse?: (value: any) => number,
}

type FriezeProps = {
  // core
  selectedItem: ?number,
  items: Array<Item>,
  itemScale: Scale,
  labelsToRender: number | string,
  onChange: (Array<Item>) => void,
  onSelect: (index: number) => void,
  renderInput: (item: Item) => React$Element<*>,
  renderLabel: () => React$Element<*>,
  // options
  isVertical: boolean,
  isSnappable: boolean,
  isSteppable: boolean,
  isSwappable: boolean,
  isEditable: boolean,
  // style
  theme: ?object,
  legendClassName: ?string,
  legendStyle: ?Object,
  legendLabelClassName: ?string,
  legendLabelStyle: ?Object,
  legendLabelMarkerClassName: ?string,
  legendLabelMarkerStyle: ?Object,
  legendLabelTextClassName: ?string,
  legendLabelTextStyle: ?Object,
  axisClassName: ?string,
  axisStyle: ?Object,
  axisSegmentClassName: ?string,
  axisSegmentStyle: ?Object,
  axisSegmentSelectedClassName: ?string,
  axisSegmentSelectedStyle: ?Object,
  axisSegmentHandleClassName: ?string,
  axisSegmentHandleStyle: ?Object,
}