Debugging Common Integration Issues with TanStack Ranger

Give code examples that illustrate common issues developers might encounter when integrating TanStack Ranger with React, such as incorrectly syncing state or improperly configuring components, and show how to resolve them.

import { useRanger } from 'tanstack-ranger-react';

function SliderComponent() {
  const { getTrackProps, handles, segments } = useRanger({
    values: [],
    onChange: values => console.log(values)
  });
  return (
    <div {...getTrackProps()}>{/* Track component here */}</div>
  );
}

This snippet sets up a basic TanStack Ranger slider component in React. It illustrates an incorrectly empty initial value array for the 'values' prop which might cause the slider not to display correctly. Ensure you pass a proper initial value inside the 'values' array.

import React, { useState, useEffect } from 'react';
import { useRanger } from 'tanstack-ranger-react';

function SliderWithEffect() {
  const [values, setValues] = useState([25, 75]);
  const { getTrackProps, handles, segments } = useRanger({
    values,
    onChange: setValues
  });

  useEffect(() => {
    // Side effects based on values
    console.log('Current slider values:', values);
  }, [values]);

  return (
    <div {...getTrackProps()}>{/* Track component here */}</div>
  );
}

This example integrates the TanStack Ranger with React hooks, using useState for controlling values and useEffect for listening to changes. It resolves issues around state syncing by ensuring the component's state updates correctly when the slider values change.

import { useRanger } from 'tanstack-ranger-react';

function SliderMisconfiguration() {
  const { getTrackProps, handles, segments } = useRanger({
    // Mistakenly set min and max to the same value
    min: 0,
    max: 0,
    stepSize: 5,
    values: [10],
    onChange: values => console.log(values)
  });

  if (handles.length === 0) return <p>Please correctly configure the slider.</p>;

  return (
    <div {...getTrackProps()}>{/* Track component here */}</div>
  );
}

Demonstrates handling configuration errors such as setting the 'min' and 'max' props to the same value, which would prevent the slider from functioning correctly. This snippet adds a simple check for 'handles.length' to display a message prompting to correctly configure the slider.