react-cropview
A React component providing a cropped view for large contents and making it draggable.
Installation
NOTICE: This module is still alpha quality.
npm install --save react-cropview
Example
Please check out example directory.
Usage
It's very simple. Just wrap your content with <CropView>
component.
import CropView from 'react-cropview';
// ...
render() {
return <div>
<Cropview width={320} height={240}>
<img src="large.jpg" alt="image" />
</Cropview>
</div>:
}
API
<Cropview />
name
(string
):width
(string
|number
) [required] :height
(string
|number
) [required] :constraint
(boolean
): Prevent over dragging. Default istrue
.centering
(boolean
): Centering content in default. Default istrue
.measureOn
(string
):hover
ormount
. Default ismount
.
Development
Setup
npm install
npm run build
Start dev server for example
npm start
Open http://localhost:8080/webpack-dev-server/
for auto-reloading.
If you want to debug with React Dev Tools, http://localhost:8080/
will be preferred.
Changelog
See the Releases page on GitHub.
License
MIT
Author
Yuki Kodama / @kuy