Skip to content

Commit

Permalink
docs: update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@nerdyman
nerdyman committed Oct 18, 2022
1 parent 73a1388 commit 11a9fc8
Showing 1 changed file with 16 additions and 15 deletions.
31 changes: 16 additions & 15 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ npm install react-compare-slider

### Basic Image Usage

You *may* use `ReactCompareSliderImage` to render images or use your own custom
You _may_ use `ReactCompareSliderImage` to render images or use your own custom
components.

```jsx
Expand All @@ -67,25 +67,25 @@ import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slide
<ReactCompareSlider
itemOne={<ReactCompareSliderImage src="..." srcSet="..." alt="Image one" />}
itemTwo={<ReactCompareSliderImage src="..." srcSet="..." alt="Image two" />}
/>
/>;
```

See the [Images docs](https://react-compare-slider.vercel.app/?path=/docs/docs-images--page) for more information and [demos](https://react-compare-slider.vercel.app/?path=/story/demos--images).

## Props

| Prop | Type | Required | Default value | Description |
|------|------|:--------:|---------------|-------------|
| [`boundsPadding`](https://react-compare-slider.vercel.app/?path=/story/docs-bounds-padding--page) | `number` | | `0` | Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait). |
| [`changePositionOnHover`](https://react-compare-slider.vercel.app/?path=/story/docs-change-position-on-hover--page) | `boolean` | | `false` | Whether the slider should follow the pointer on hover. |
| [`handle`](https://react-compare-slider.vercel.app/?path=/story/docs-handles--page) | `ReactNode` | | `undefined` | Custom handle component. |
| `itemOne` | `ReactNode` | ✓ | `undefined` | First component to show in slider. |
| `itemTwo` | `ReactNode` | ✓ | `undefined` | Second component to show in slider. |
| `keyboardIncrement` | `number` | | `20` | How many pixels to move when the slider handle is focused and keyboard arrow is pressed. |
| [`onlyHandleDraggable`](https://react-compare-slider.vercel.app/?path=/story/docs-only-handle-draggable--page) | `boolean` | | `false` | Whether to only change position when handle is interacted with (useful for touch devices). |
| [`onPositionChange`](https://react-compare-slider.vercel.app/?path=/story/demos--on-position-change) | `function` | | `undefined` | Callback on position change, returns current position percentage as argument `(position) => { ... }`. |
| [`portrait`](https://react-compare-slider.vercel.app/?path=/story/demos--portrait) | `boolean` | | `false` | Whether to use portrait orientation. |
| [`position`](https://react-compare-slider.vercel.app/?path=/story/demos--position) | `number` | | `50` | Initial percentage position of divide (`0-100`). |
| Prop | Type | Required | Default value | Description |
| ------------------------------------------------------------------------------------------------------------------- | ----------- | :------: | ------------- | ----------------------------------------------------------------------------------------------------- |
| [`boundsPadding`](https://react-compare-slider.vercel.app/?path=/story/docs-bounds-padding--page) | `number` | | `0` | Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait). |
| [`changePositionOnHover`](https://react-compare-slider.vercel.app/?path=/story/docs-change-position-on-hover--page) | `boolean` | | `false` | Whether the slider should follow the pointer on hover. |
| [`handle`](https://react-compare-slider.vercel.app/?path=/story/docs-handles--page) | `ReactNode` | | `undefined` | Custom handle component. |
| `itemOne` | `ReactNode` | ✓ | `undefined` | First component to show in slider. |
| `itemTwo` | `ReactNode` | ✓ | `undefined` | Second component to show in slider. |
| `keyboardIncrement` | `number` | | `20` | How many pixels to move when the slider handle is focused and keyboard arrow is pressed. |
| [`onlyHandleDraggable`](https://react-compare-slider.vercel.app/?path=/story/docs-only-handle-draggable--page) | `boolean` | | `false` | Whether to only change position when handle is interacted with (useful for touch devices). |
| [`onPositionChange`](https://react-compare-slider.vercel.app/?path=/story/demos--on-position-change) | `function` | | `undefined` | Callback on position change, returns current position percentage as argument `(position) => { ... }`. |
| [`portrait`](https://react-compare-slider.vercel.app/?path=/story/demos--portrait) | `boolean` | | `false` | Whether to use portrait orientation. |
| [`position`](https://react-compare-slider.vercel.app/?path=/story/demos--position) | `number` | | `50` | Initial percentage position of divide (`0-100`). |

See the [API docs](https://react-compare-slider.vercel.app/?path=/docs/docs-api--page) for more information.

Expand All @@ -97,7 +97,7 @@ The library supports all types of React components.

- [Google Maps Demo](https://react-compare-slider.vercel.app/?path=/story/demos-custom-components--google-maps)

Custom components can apply the same base styles as `ReactCompareSliderImage`
Custom components can apply the same base styles as `ReactCompareSliderImage`
by using the [`styleFitContainer` CSS utility](https://react-compare-slider.vercel.app/?path=/docs/docs-api--page#stylefitcontainer).

### Custom Handles
Expand All @@ -110,6 +110,7 @@ See the [Handles docs](https://react-compare-slider.vercel.app/?path=/docs/docs-

- [Official GOV.UK Coronavirus Dashboard](https://coronavirus.data.gov.uk/details/interactive-map/vaccinations#vaccinations-map-container)
- [Upscayl, Free and Open Source AI Image Upscaler](https://github.com/upscayl/upscayl#free-and-open-source-ai-image-upscaler)
- [DevTools-X, A collection of offline first developer utilities](https://github.com/fosslife/devtools-x)

## Requirements

Expand Down

0 comments on commit 11a9fc8

Please sign in to comment.