Export individual composable components

[nerdyman]

The slider currently applies some props and events internally, although useReactCompareSliderRef provides access to the internal components and logic, it could be made simpler.

Exporting a hook and each slider component will allow people to roll their own slider with full customisation without workarounds.

The module will still export a single ReactCompareSlider component with all the current functionality burned in but this will use the hook and individual components internally.

Proposed API

Context provider to store shared state for the components, separating the Context from Root will allow devs to wrap wider components that may need access to the props without putting them inside the slider markup.

The hook will return the props and event handlers which are then stored in context.

This functionality should allow custom functionality including:

• Preventing slide on click #158

import * as Slider from 'react-compare-slider/components';
import { useReactCompareSlider } from 'react-compare-slider/hooks'; 

export const Example = () => {
  const sliderProps = useReactCompareSlider({ defaultPosition: 80 });

  return (
    <Slider.Provider {...sliderProps}>
      <Slider.Root>
        <Slider.Item item="itemOne">
          <Slider.Image src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=800&q=80" alt="Image One" />
        </Slider.Item>
        <Slider.Item item="itemTwo">
          <Slider.Image src="https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=800&q=80" alt="Image Two" />
          </Slider.Item>
        <Slider.HandleRoot>
          <Slider.Handle />
        </Slider.HandleRoot>
      </Slider.Root/>
    </Slider.Provider>
  );
};