SDSC/open-pulse-hackathon-data-analysis huggingface dataset:
Repository: hassan11196/react-image-cropper
Description: react image crop
Primary language: JavaScript

## React Image Cropper
🚨🚨 Abandoned. The Size of cropped image was unusually large. I couldnt find the issue and moved to 
[react-avatar-editor](https://www.npmjs.com/package/react-avatar-editor)

### This is a fork with fixes for Custom Code for cropping limits.

### Merged Changes from tinsaye and slidewiki.

[![Downloads](https://img.shields.io/npm/dt/react-image-cropper.svg)](https://www.npmjs.com/package/react-image-cropper)
[![Version](https://img.shields.io/npm/v/react-image-cropper.svg)](https://www.npmjs.com/package/react-image-cropper)

This project has been forked from [https://github.com/jerryshew/react-image-cropper](https://github.com/jerryshew/react-image-cropper), v1.1.2 and includes some changes that jerryshew did not wanted to merge. See this repo also for React versions >0.15.

[![Downloads](https://img.shields.io/npm/dt/slidewiki-react-image-cropper.svg)](https://www.npmjs.com/package/slidewiki-react-image-cropper)
[![Version](https://img.shields.io/npm/v/slidewiki-react-image-cropper.svg)](https://www.npmjs.com/package/slidewiki-react-image-cropper)

See the original repository for a demo of the image cropper - [https://github.com/jerryshew/react-image-cropper](https://github.com/jerryshew/react-image-cropper)

**Our custom changes Custom:**

+ limit the cropper container height to a max value (useful for portait images (e.g. 9:21), that would cause the cropper to stretch a lot)
+ define max crop sizes that cause the cropper to limit the resulting image to some maximum values

### How to Use

+ `import {Cropper} from 'react-image-cropper'`

+ styles are all inline

+ define Cropper with src, and ref to execute crop method  

```
<Cropper src="http://braavos.me/images/posts/college-rock/the-smiths.png" ref="cropper"/>
```

+ crop and get image url

`image.src = this.refs.cropper.crop()`

+ get crop values

OPTIONS (optional):

+ maxHeight : make sure the cropped image is not bigger than this max height
+ maxWidth : make sure the cropped image is not bigger than this max width

`image.src = this.refs.cropper.crop(maxWidth, maxHeight)`

`var values = this.refs.cropper.values()`

+ onChange for preview

(values) => onChange(values)

+ custom use

| prop  |  value   |
|:-------:|:--------|
| ratio | width / height |
| width | cropper frame width |
| height | cropper frame height |
| originX | cropper original position(x axis), accroding to image left|
| originY | cropper original position(Y axis), accroding to image top|
| fixedRatio | turn on/off fixed ratio (bool default true) |
| allowNewSelection | allow user to create a new selection instead of reusing initial selection (bool default true) |
| styles | specify styles to override inline styles |
| onImgLoad | specify fuction callback to run when the image completed loading |
| beforeImgload | specify function callback to run when the image size value is ready but image is not completed loading |
| onChange | triggred when dragging stop, get values of cropper |
| limitHeight | limit the height of the cropper, e.g. if the img is a portrait |
Repository: hassan11196/salemaziel-netlifycms
Primary language: JavaScript

[![Netlify Status](https://api.netlify.com/api/v1/badges/0643e551-0fef-4f57-9d3c-29d576f3e06c/deploy-status)](https://app.netlify.com/sites/gatsby-personal-starter-blog/deploys)

<img alt="screenshot" src="./screenshot.gif">

This is the search-enabled version of Gatsby Personal Starter Blog!

## 🚀 Quick start

1.  **Create a Gatsby site.**

    Use the Gatsby CLI to create a new site, specifying the blog starter.

    ```sh
    # create a new Gatsby site using the blog starter
    gatsby new my-blog-starter https://github.com/thomaswang/gatsby-personal-starter-blog
    ```

1.  **Start developing.**

    Navigate into your new site’s directory and start it up.

    ```sh
    cd my-blog-starter/
    gatsby develop
    ```

1.  **Open the source code and start editing!**

    Your site is now running at `http://localhost:8000`!

    _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._

    Open the `my-blog-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!

## 🎓 Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start:

- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.

- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.

## 📔 Learning Netlify CMS with Gatsby

Start from [this point](https://www.gatsbyjs.org/docs/sourcing-from-netlify-cms/#authenticating-with-github) in the Gatsby documentation to finish the set up for your personal Netlify CMS with authentication.

## 💫 Deploy

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/thomaswangio/gatsby-personal-starter-blog)