-
-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: update docs and more comprehensive e2e tests
- Loading branch information
Showing
31 changed files
with
1,316 additions
and
584 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'; | ||
|
|
||
| import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider'; | ||
|
|
||
| <Meta title="Docs/Keyboard Increment" component={ReactCompareSlider} /> | ||
|
|
||
| # Using `keyboardIncrement` | ||
|
|
||
| The `keyboardIncrement` prop allows you to use the keyboard arrows to increment/decrement the slider | ||
| position when the slider `handle` is focused. | ||
|
|
||
| The increment can be either a `number` which evaluates to a pixel value or a `string` value | ||
| ending in `%`, e.g. `20%` to move the slider 20% of the total slider width in landscape mode | ||
| or height in portrait mode. A percentage is usually preferable as it adapts relatively to the width or | ||
| height of the slider, making it behaving consistently across resolutions. | ||
|
|
||
| ```jsx | ||
| // Increment by 20 pixels. | ||
| <ReactCompareSlider | ||
| keyboardIncrement={20} | ||
| /> | ||
|
|
||
| // Increment by 20 percent of the slider width or height. | ||
| <ReactCompareSlider | ||
| keyboardIncrement={'20%'} | ||
| /> | ||
| ``` | ||
|
|
||
| <Canvas> | ||
| <Story id="demos--keyboard-increment" /> | ||
| </Canvas> | ||
|
|
||
| <ArgsTable of={ReactCompareSlider} /> | ||
|
|
||
| <br /> | ||
|
|
||
| ## Live Examples | ||
|
|
||
| Checkout the [Keyboard Increment examples](/story/demos--keyboard-increment). | ||
|
|
62 changes: 62 additions & 0 deletions
62
docs/storybook/content/09-use-react-compare-slider-ref.stories.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'; | ||
|
|
||
| import { ReactCompareSlider, ReactCompareSliderImage, UseReactCompareSliderReturn } from 'react-compare-slider'; | ||
|
|
||
| <Meta title="Docs/useReactCompareSliderRef" component={ReactCompareSlider} /> | ||
|
|
||
| # Using the `useReactCompareSliderRef` Hook | ||
|
|
||
| <p class="sb-custom-info"> | ||
|
|
||
| **Note**: Properties returned from the hook are only usable _after_ the component has mounted. | ||
|
|
||
| </p> | ||
|
|
||
| The `useReactCompareSliderRef` hook allows you to access the root container as a ref (`rootContainer`) and provides | ||
| access to the internal function used to performantly update the slider position (`setPosition`). | ||
|
|
||
| | Property | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `rootContainer` | `HTMLDivElement` or `null` | The root container DOM element. | | ||
| | `setPosition` | `(position: number) => void` | Set the slider position to the given percentage. | | ||
|
|
||
| `setPosition` offers performant programmatic control of the slider. It is more performant because | ||
| it does not trigger a re-render, as opposed to setting the `position` prop which will re-render the | ||
| component then call the internal set position function as a side effect. | ||
|
|
||
| Another benefit of `setPosition` is that it can be used to reset the slider position back to | ||
| the initial position. This is not possible with the `position` prop. | ||
|
|
||
| ```tsx | ||
| const Example = () => { | ||
| const reactCompareSliderRef = useReactCompareSliderRef(); | ||
|
|
||
| // Safely use the ref properties in an effect or event handler callback. | ||
| useEffect(() => { | ||
| console.log(reactCompareSliderRef.current.rootContainer); // The root container DOM element. | ||
| reactCompareSliderRef.current.setPosition(20); // Set the slider position to 20%. | ||
| }, [reactCompareSliderRef]); | ||
|
|
||
| return ( | ||
| <ReactCompareSlider | ||
| ref={reactCompareSliderRef} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| ``` | ||
|
|
||
| There's no limitation to `setPosition` usage, you can even use it to sync sliders together! | ||
|
|
||
| <Canvas> | ||
| <Story id="demos--use-react-compare-slider-ref" /> | ||
| </Canvas> | ||
|
|
||
| <ArgsTable of={ReactCompareSlider} /> | ||
|
|
||
| <br /> | ||
|
|
||
| ## Live Examples | ||
|
|
||
| Checkout the [useReactCompareSliderRef examples](/story/demos--use-react-compare-slider-ref). | ||
|
|
Oops, something went wrong.