How to use the react-with-direction/dist/DirectionProvider.DIRECTIONS.RTL function in react-with-direction

To help you get started, we’ve selected a few react-with-direction examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github airbnb / rheostat / stories / ExampleSlider.jsx View on Github external
top: 20,
          }}
        />
      );
    }
    PitComponent.propTypes = {
      style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
      children: PropTypes.number,
    };
    PitComponent.defaultProps = {
      style: null,
      children: null,
    };

    return (
      <DirectionProvider direction={DIRECTIONS.RTL}>
        <LabeledSlider
          pitComponent={PitComponent}
          pitPoints={[0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100]} // eslint-disable-line max-len
          snap
          snapPoints={[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]}
          values={[40, 80]}
        />
      </DirectionProvider>
    );
  })
  .add('RTL Custom Handle', () => {
github airbnb / react-dates / stories / DateRangePicker.js View on Github external
.add('with DirectionProvider', withInfo()(() => (
    <DirectionProvider direction={DIRECTIONS.RTL}>
      <DateRangePickerWrapper
        startDatePlaceholderText="تاریخ شروع"
        endDatePlaceholderText="تاریخ پایان"
        anchorDirection={ANCHOR_RIGHT}
        showDefaultInputIcon
        showClearDates
        isRTL
      />
    </DirectionProvider>
  )))
  .add('vertical with custom height', withInfo()(() => (
github airbnb / react-dates / stories / DayPicker.js View on Github external
.add('vertical with DirectionProvider', withInfo()(() => (
    <DirectionProvider direction={DIRECTIONS.RTL}>
      <DayPicker
        numberOfMonths={2}
        orientation={VERTICAL_ORIENTATION}
        isRTL
      />
    </DirectionProvider>
  )))
  .add('vertically scrollable with DirectionProvider', withInfo()(() => (
github airbnb / react-dates / stories / SingleDatePicker.js View on Github external
.add('with DirectionProvider', withInfo()(() => (
    <DirectionProvider direction={DIRECTIONS.RTL}>
      <SingleDatePickerWrapper
        placeholder="تاریخ شروع"
        anchorDirection={ANCHOR_RIGHT}
        showDefaultInputIcon
        showClearDate
        isRTL
      />
    </DirectionProvider>
  )))
  .add('vertical with custom height', withInfo()(() => (

react-with-direction

Components to provide and consume RTL or LTR direction in React

MIT
Latest version published 1 year ago

Package Health Score

63 / 100
Full package analysis