Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/awran5/react-simple-before-after
A simple yet powerful react component for adding a nice before after image slider to your project.
https://github.com/awran5/react-simple-before-after
before-after react react-component
Last synced: 13 days ago
JSON representation
A simple yet powerful react component for adding a nice before after image slider to your project.
- Host: GitHub
- URL: https://github.com/awran5/react-simple-before-after
- Owner: awran5
- License: mit
- Created: 2021-12-08T20:08:24.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2021-12-09T20:25:28.000Z (almost 3 years ago)
- Last Synced: 2024-10-12T10:06:59.453Z (27 days ago)
- Topics: before-after, react, react-component
- Language: TypeScript
- Homepage: https://react-simple-before-after.vercel.app/
- Size: 1.57 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Simple Rating
> A simple yet powerful react component for adding a nice before after image slider to your project.
[](https://www.npmjs.com/package/react-simple-before-after)
## Install
#### npm
```sh
npm i react-simple-before-after
```
#### Yarn
```sh
yarn add react-simple-before-after
```
## Usage
```jsx
import { BeforeAfter } from 'react-simple-before-after'
export default function MyComponent() {
return (
)
}
```
### Available Props
| Prop | Type | Options | Description | Default |
| ----------------- | ------------------- | -------- | -------------------------------------------------------------------------------------------------------------------- | :-------------------: |
| `beforeImage` | string | Required | Before image src | `-` |
| `afterImage` | string | Required | After image src | `-` |
| `pointerMove` | boolean | Optional | Enables [onPointerMove](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) instead of input `onChange` | `false` |
| `onChange` | function | Optional | onChange callback using input type `range` method (default) | `-` |
| `onPointerMove` | function | Optional | onPointerMove callback available when `pointerMove` is enabled | `-` |
| `onPointerEnter` | function | Optional | onPointerEnter callback | `-` |
| `onPointerLeave` | function | Optional | onPointerLeave callback | `-` |
| `className` | string | Optional | Main `div` className | `before-after-slider` |
| `beforeClassName` | string | Optional | Before `div` className | `before` |
| `afterClassName` | string | Optional | After `div` className | `after` |
| `buttonClassName` | string | Optional | Button `div` className (not availabe if `pointerMove` is enabled) | `resize-button` |
| `style` | React.CSSProperties | Optional | Main `div` inline style | `-` |
| `beforeStyle` | React.CSSProperties | Optional | Before `div` inline style | `-` |
| `afterStyle` | React.CSSProperties | Optional | After `div` inline style | `-` |
| `buttonStyle` | React.CSSProperties | Optional | Button `div` inline style (not availabe when `pointerMove` is enabled) | `-` |
---
## Demo
See demo [in action](https://react-simple-before-after.vercel.app/).
[](https://codesandbox.io/s/react-before-after-slider-uk1ys?fontsize=14&hidenavigation=1&theme=dark)
### License
MIT © [awran5](https://github.com/awran5/)