diff --git a/README.md b/README.md index a305d97..cbeb3d8 100644 --- a/README.md +++ b/README.md @@ -1,132 +1,101 @@ - -# Cloudinary React Library - -Cloudinary is a cloud service that offers a solution to a web application's entire image management pipeline. - -Easily upload images to the cloud. Automatically perform smart image resizing, cropping and conversion without installing any complex software. Integrate Facebook or Twitter profile image extraction in a snap, in any dimension and style to match your website’s graphics requirements. Images are seamlessly delivered through a fast CDN, and much much more. - -Cloudinary offers comprehensive APIs and administration capabilities and is easy to integrate with any web application, existing or new. - -Cloudinary provides URL and HTTP based APIs that can be easily integrated with any Web development framework. +Cloudinary React SDK +========================= +## About +The Cloudinary React SDK allows you to quickly and easily integrate your application with Cloudinary. +Effortlessly optimize and transform your cloud's assets. + +#### Note +This Readme provides basic installation and usage information. +For the complete documentation, see the [React SDK Guide](https://cloudinary.com/documentation/react1_integration). + + +## Table of Contents +- [Key Features](#key-features) +- [Version Support](#Version-Support) +- [Installation](#installation) +- [Usage](#usage) + - [Setup](#Setup) + - [Transform and Optimize Assets](#Transform-and-Optimize-Assets) + - [Generate Image and HTML Tags](#Generate-Image-and-Video-HTML-Tags) + +## Key Features +- [Transform](https://cloudinary.com/documentation/react1_video_manipulation#video_transformation_examples) and [optimize](https://cloudinary.com/documentation/react1_image_manipulation#image_optimizations) assets. +- Generate [image](https://cloudinary.com/documentation/react1_image_manipulation#deliver_and_transform_images) and [video](https://cloudinary.com/documentation/react1_video_manipulation#video_element) tags. + +## Version Support +| SDK Version | React 15.3 | React 16.2 | React 16.3 | React 17 | +|---------------|------------|------------|------------|----------| +| 1.6.8 & up | X | X | V | V | +| 1.2.0 - 1.6.7 | X | X | V | X | +| 1.0.5 - 1.1.4 | X | V | X | X | +| 1.0.0 - 1.0.4 | V | X | X | X | ## Installation - - -### NPM - -1. Install the files using the following command. Use the optional `--save` parameter if you wish to save the dependency in your `bower.json` file. - - ```shell - npm install cloudinary-react --save - ``` - -1. Include the javascript files in your code. For Example: - - ```js - import {Image} from 'cloudinary-react'; - ``` - - -## Setup - -In order to properly use this library you have to provide it with a few configuration parameters. All configuration parameters can be applied directly to the element or using a CloudinaryContext element. - - -```js -ReactDOM.render( -
-

Hello, world!

- - // Or for more advanced usage: - // import {CloudinaryContext, Transformation} from 'cloudinary-react'; - - - - - -
, - document.getElementById('example') - ); +### Install using your favorite package manager (yarn, npm) +```bash +npm install cloudinary-react +``` +Or +```bash +yarn add cloudinary-react ``` - -Required: - -* `cloudName` - The cloudinary cloud name associated with your Cloudinary account. - -Optional: - -* `privateCdn`, `secureDistribution`, `cname`, `cdnSubdomain` - Please refer to [Cloudinary Documentation](https://cloudinary.com/documentation/react_integration#3_set_cloudinary_configuration_parameters) for information on these parameters. - ## Usage - -The library includes 6 Components: - -* CloudinaryContext -* Image -* Audio -* Video -* Transformation -* Placeholder - can only be used as child of an Image component - -## Components Demo -Storybook for the components is available [here](https://cloudinary.github.io/cloudinary-react/) - -### CloudinaryContext -CloudinaryContext allows you to define shared parameters that are applied to all children elements. - -### Image -The Image element defines a Cloudinary Image tag. - -### Video -The Video element defines a Cloudinary Video tag. - -### Transformation -The Transformation element allows you to defined additional transformations on the parent element. - -For example: - -``` - - - - - - +### Setup +```javascript +import React from 'react'; +import {Image, Video, Transformation} from 'cloudinary-react'; ``` - -The Cloudinary Documentation can be found at: -https://cloudinary.com/documentation/react_integration - -## Additional resources - -Additional resources are available at: - -* [Website](http://cloudinary.com) -* [Documentation](http://cloudinary.com/documentation) -* [Knowledge Base](http://support.cloudinary.com/forums) -* [Image transformations documentation](http://cloudinary.com/documentation/image_transformations) - -## Support - -You can [open an issue through GitHub](https://github.com/cloudinary/cloudinary_js/issues). - -Contact us at [http://cloudinary.com/contact](http://cloudinary.com/contact). - -Stay tuned for updates, tips and tutorials: [Blog](http://cloudinary.com/blog), [Twitter](https://twitter.com/cloudinary), [Facebook](http://www.facebook.com/Cloudinary). - -## Join the Community ########################################################## - -Impact the product, hear updates, test drive new features and more! Join [here](https://www.facebook.com/groups/CloudinaryCommunity). - -## Updating github pages -The github pages source is the "gh-pages" branch. To generate updated storybook: -1. Switch to "gh-pages" branch -2. pull from master -3. rebuild storybook by running "npm run build-storybook" -4. commit and push - -## License - +### Transform and Optimize Assets +- [See full documentation](https://cloudinary.com/documentation/react1_image_manipulation) + + ```jsx + // Apply a single transformation + + + + ``` + + ```jsx + // Chain (compose) multiple transformations + + + + + + ``` +### Generate Image and Video HTML Tags + - Use to generate image tags + - Use