{"id":21521,"date":"2017-05-10T15:31:20","date_gmt":"2017-05-10T15:31:20","guid":{"rendered":"http:\/\/how_to_build_an_image_library_with_react_cloudinary"},"modified":"2025-03-02T13:20:10","modified_gmt":"2025-03-02T21:20:10","slug":"how_to_build_an_image_library_with_react_cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary","title":{"rendered":"Building a React Image Gallery With Cloudinary"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>To start building a user interface, you might use <a href=\"https:\/\/reactjs.org\/\">React<\/a>, a JavaScript library for building flexible and reusable components. However, you also need a supporting tool for managing digital media (images and videos). The recently announced <a href=\"https:\/\/github.com\/cloudinary\/cloudinary-react\">React SDK<\/a> from Cloudinary capably serves that purpose.<\/p>\n<p>In brief, the Cloudinary platform enables you to seamlessly and efficiently upload, optimize, transform, store, and deliver media across viewing devices with no quality compromise. Do check out its many feature-rich, sound capabilities.<\/p>\n<p>This tutorial guides you through the steps of building a React image gallery with <a href=\"https:\/\/github.com\/cloudinary\/cloudinary-react\">Cloudinary\u2019s React SDK<\/a>. It\u2019s an intuitive, straightforward process well worth learning.<\/p>\n<h2>Installing the Prerequisites<\/h2>\n<p>First, install Cloudinary\u2019s React SDK and upload widget:<\/p>\n<h3>1. Specify the React app\u2019s basic properties and requirements.<\/h3>\n<p>Create a file with the following JSON code to specify the basic properties for the React app and configure a minimal number of its dependencies.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-wrap-lines\">{\n  <span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"img-library\"<\/span>,\n  <span class=\"hljs-attr\">\"version\"<\/span>: <span class=\"hljs-string\">\"1.0.0\"<\/span>,\n  <span class=\"hljs-attr\">\"description\"<\/span>: <span class=\"hljs-string\">\"\"<\/span>,\n  <span class=\"hljs-attr\">\"main\"<\/span>: <span class=\"hljs-string\">\"index.js\"<\/span>,\n  <span class=\"hljs-attr\">\"scripts\"<\/span>: {\n    <span class=\"hljs-attr\">\"watch\"<\/span>: <span class=\"hljs-string\">\"webpack -d --watch\"<\/span>,\n    <span class=\"hljs-attr\">\"build\"<\/span>: <span class=\"hljs-string\">\"webpack\"<\/span>,\n    <span class=\"hljs-attr\">\"serve\"<\/span>: <span class=\"hljs-string\">\"serve .\/public\"<\/span>\n  },\n  <span class=\"hljs-attr\">\"author\"<\/span>: <span class=\"hljs-string\">\"\"<\/span>,\n  <span class=\"hljs-attr\">\"license\"<\/span>: <span class=\"hljs-string\">\"MIT\"<\/span>,\n  <span class=\"hljs-attr\">\"devDependencies\"<\/span>: {\n    <span class=\"hljs-attr\">\"babel-core\"<\/span>: <span class=\"hljs-string\">\"^6.18.2\"<\/span>,\n    <span class=\"hljs-attr\">\"babel-loader\"<\/span>: <span class=\"hljs-string\">\"^6.2.9\"<\/span>,\n    <span class=\"hljs-attr\">\"babel-preset-es2015\"<\/span>: <span class=\"hljs-string\">\"^6.18.0\"<\/span>,\n    <span class=\"hljs-attr\">\"babel-preset-react\"<\/span>: <span class=\"hljs-string\">\"^6.16.0\"<\/span>,\n    <span class=\"hljs-attr\">\"serve\"<\/span>: <span class=\"hljs-string\">\"^1.4.0\"<\/span>,\n    <span class=\"hljs-attr\">\"webpack\"<\/span>: <span class=\"hljs-string\">\"^1.14.0\"<\/span>\n  },\n  <span class=\"hljs-attr\">\"dependencies\"<\/span>: {\n    <span class=\"hljs-attr\">\"axios\"<\/span>: <span class=\"hljs-string\">\"^0.15.3\"<\/span>,\n    <span class=\"hljs-attr\">\"cloudinary-react\"<\/span>: <span class=\"hljs-string\">\"^1.0.1\"<\/span>,\n    <span class=\"hljs-attr\">\"react\"<\/span>: <span class=\"hljs-string\">\"^15.4.1\"<\/span>,\n    <span class=\"hljs-attr\">\"react-dom\"<\/span>: <span class=\"hljs-string\">\"^15.4.1\"<\/span>\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>Under <code>dependencies<\/code>:<\/p>\n<ul>\n<li>\n<code>axios<\/code> is a tool for making HTTP requests, in this case for the images on the Cloudinary server.<\/li>\n<li>\n<code>cloudinary-react<\/code> refers to Cloudinary\u2019s React SDK.<\/li>\n<li>\n<code>react<\/code> is the React library.<\/li>\n<li>\n<code>react-dom<\/code> is the React Document Object Model (DOM).<\/li>\n<\/ul><\/div>\n<h3>2. Install the dependencies<\/h3>\n<p>Install the dependencies with this npm command line:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-comment\"># Install dependencies<\/span>\nnpm install\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h3>3. Set up Webpack.<\/h3>\n<p>Webpack is the build tool. Create a file with the following JavaScript code to configure the basic Webpack settings, such as the entry, output, and loaders, for running builds and compiling React apps (<code>.jsx<\/code> files).<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ .\/webpack.config.js<\/span>\n<span class=\"hljs-keyword\">var<\/span> webpack = <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">'webpack'<\/span>);\n<span class=\"hljs-keyword\">var<\/span> path = <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">'path'<\/span>);\n\n<span class=\"hljs-keyword\">var<\/span> BUILD_DIR = path.resolve(__dirname, <span class=\"hljs-string\">'public'<\/span>);\n<span class=\"hljs-keyword\">var<\/span> APP_DIR = path.resolve(__dirname, <span class=\"hljs-string\">'src'<\/span>);\n\n<span class=\"hljs-keyword\">var<\/span> config = {\n    <span class=\"hljs-attr\">entry<\/span>: APP_DIR + <span class=\"hljs-string\">'\/index.jsx'<\/span>,\n    <span class=\"hljs-attr\">output<\/span>: {\n        <span class=\"hljs-attr\">path<\/span>: BUILD_DIR,\n        <span class=\"hljs-attr\">filename<\/span>: <span class=\"hljs-string\">'bundle.js'<\/span>\n    },\n    <span class=\"hljs-attr\">module<\/span> : {\n        <span class=\"hljs-attr\">loaders<\/span> : &#91;\n            {\n                <span class=\"hljs-attr\">test<\/span> : <span class=\"hljs-regexp\">\/\\.jsx?\/<\/span>,\n                <span class=\"hljs-attr\">include<\/span> : APP_DIR,\n                <span class=\"hljs-attr\">loader<\/span> : <span class=\"hljs-string\">'babel'<\/span>\n            }\n        ]\n    }\n};\n\n<span class=\"hljs-built_in\">module<\/span>.exports = config;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h3>4. Create two entry points.<\/h3>\n<p>Create the two files below. The top one, which is in JavaScript (<code>index.jsx<\/code>), generates an entry point similar to the one configured for Webpack. The bottom one, which is in HTML (<code>index.html<\/code>), creates an entry point for the browser.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ .\/src\/index.jsx<\/span>\n<span class=\"hljs-keyword\">import<\/span> React, { Component } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { render } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-dom'<\/span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">Main<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">Component<\/span> <\/span>{\n    render() {\n        <span class=\"hljs-keyword\">return<\/span> (\n           <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"main\"<\/span>&gt;<\/span>\n               <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Scotchage<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n           <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n        );\n    }\n}\n\nrender(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Main<\/span> \/&gt;<\/span><\/span>, <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'container'<\/span>));\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-comment\">&lt;!-- .\/public\/index.html --&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-comment\">&lt;!--Stylesheet--&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"style.css\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n    <span class=\"hljs-comment\">&lt;!--Container for React rendering--&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-comment\">&lt;!--Bundled file--&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"bundle.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h3>5. Register for a Cloudinary account.<\/h3>\n<p><a href=\"https:\/\/cloudinary.com\/users\/register\/free\">Sign up<\/a> for a free Cloudinary account. Afterwards, your credentials are displayed on your account dashboard, as in this example:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill,f_auto,q_auto\/dpr_2.0\/HdBYCWr.png\" alt=\"dashboard\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"944\"\/><\/p>\n<h2>Uploading Images<\/h2>\n<p>Upload your React app\u2019s images to Cloudinary with the latter\u2019s upload widget. Do the following:<\/p>\n<ol>\n<li>\n<p>Add the upload widget to the React app\u2019s <code>index.html<\/code> file:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">&lt;!-- .\/<span class=\"hljs-keyword\">public<\/span>\/index.html \u2192\n&lt;html&gt;\n&lt;head&gt;\n  . . .\n&lt;\/head&gt;\n&lt;body&gt;\n    . . .\n    &lt;!-- UPLOAD WIDGET \u2192\n    &lt;script src=<span class=\"hljs-string\">\"\/\/widget.cloudinary.com\/global\/all.js\"<\/span> type=<span class=\"hljs-string\">\"text\/javascript\"<\/span>&gt;&lt;\/script&gt;\n    &lt;script src=<span class=\"hljs-string\">\"bundle.js\"<\/span>&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<\/li>\n<li>\n<p>Create a button, attach an event to it, and upload an image on a click of the button. Here\u2019s the JavaScript code:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React, { Component } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { render } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-dom'<\/span>;\n\n    <span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">Main<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">Component<\/span> <\/span>{\n\n    uploadWidget() {\n        cloudinary.openUploadWidget({ <span class=\"hljs-attr\">cloud_name<\/span>: <span class=\"hljs-string\">'cloud_name'<\/span>, <span class=\"hljs-attr\">upload_preset<\/span>: <span class=\"hljs-string\">'preset'<\/span>, <span class=\"hljs-attr\">tags<\/span>:&#91;<span class=\"hljs-string\">'xmas'<\/span>]},\n            <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">error, result<\/span>) <\/span>{\n                <span class=\"hljs-built_in\">console<\/span>.log(result);\n            });\n    }\n    render(){\n        <span class=\"hljs-keyword\">return<\/span> (\n            <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"main\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Galleria<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"upload\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{this.uploadWidget.bind(this)}<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"upload-button\"<\/span>&gt;<\/span>\n                        Add Image\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n\n        );\n    }\n}\n\nrender(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Main<\/span> \/&gt;<\/span><\/span>, <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'container'<\/span>));\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<\/li>\n<\/ol>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <ul>\n<li>The <code>uploadWidget<\/code> member method is the handler invoked by the click event to upload images by calling <code>cloudinary.openUploadWidget<\/code>.<\/li>\n<li>\n<code>openUploadWidget<\/code> takes as its parameters a configuration object and the upload callback handler. Be sure to specify the valid values for the <code>cloud_name<\/code> and <code>upload_preset<\/code> properties. For details, see the documentation on <a href=\"https:\/\/cloudinary.com\/documentation\/how_to_integrate_cloudinary#optional_update_cloud_name_and_other_account_settings\">cloud names<\/a> and <a href=\"https:\/\/cloudinary.com\/documentation\/upload_presets\">upload presets<\/a>.<\/li>\n<\/ul><\/div>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/KeMwAtv.png\" alt=\"Upload\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"1029\"\/><\/p>\n<h2>Delivering Images with the Cloudinary React SDK<\/h2>\n<p>The Cloudinary React SDK comprises three major components:<\/p>\n<ul>\n<li>\n<strong>Image<\/strong>: This component requests for the images defined by their IDs from the Cloudinary server and then displays the images on the browser.<\/li>\n<li>\n<strong>Transformation<\/strong>:  This component transforms the images delivered with <code>Image<\/code>.<\/li>\n<li>\n<strong>CloudinaryContext<\/strong>: Configuring multiple images, one by one, in the <code>Image<\/code> component is tedious. Instead, you can specify the configuration for them all in this component.<\/li>\n<\/ul>\n<p>Here\u2019s a typical structure:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CloudinaryContext<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Image<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Transformation<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Transformation<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Image<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Image<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Transformation<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Image<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">CloudinaryContext<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Now request an image from the Cloudinary server and display the image with certain components through this JavaScript code:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React, { Component } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> axios <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'axios'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { CloudinaryContext, Transformation, Image } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'cloudinary-react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { render } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-dom'<\/span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">Main<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">Component<\/span> <\/span>{\n    <span class=\"hljs-keyword\">constructor<\/span>(props) {\n        <span class=\"hljs-keyword\">super<\/span>(props);\n        <span class=\"hljs-keyword\">this<\/span>.state = {\n            <span class=\"hljs-attr\">gallery<\/span>: &#91;]\n        }\n    }\n    componentDidMount() {\n        <span class=\"hljs-comment\">\/\/ Request for images tagged xmas       <\/span>\n        axios.get(<span class=\"hljs-string\">'https:\/\/res.cloudinary.com\/christekh\/image\/list\/xmas.json'<\/span>)\n            .then(<span class=\"hljs-function\"><span class=\"hljs-params\">res<\/span> =&gt;<\/span> {\n                <span class=\"hljs-built_in\">console<\/span>.log(res.data.resources);\n                <span class=\"hljs-keyword\">this<\/span>.setState({<span class=\"hljs-attr\">gallery<\/span>: res.data.resources});\n            });\n    }\n    uploadWidget() {\n       <span class=\"hljs-comment\">\/\/ . . .<\/span>\n    }\n    render(){\n        <span class=\"hljs-keyword\">return<\/span> (\n            <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"main\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Galleria<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"gallery\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CloudinaryContext<\/span> <span class=\"hljs-attr\">cloudName<\/span>=<span class=\"hljs-string\">\"cloud_name\"<\/span>&gt;<\/span>\n                        {\n                            this.state.gallery.map(data =&gt; {\n                                return (\n                                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"responsive\"<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{data.public_id}<\/span>&gt;<\/span>\n                                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"img\"<\/span>&gt;<\/span>\n                                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">target<\/span>=<span class=\"hljs-string\">\"_blank\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">{<\/span>`<span class=\"hljs-attr\">https:<\/span>\/\/<span class=\"hljs-attr\">res.cloudinary.com<\/span>\/<span class=\"hljs-attr\">christekh<\/span>\/<span class=\"hljs-attr\">image<\/span>\/<span class=\"hljs-attr\">upload<\/span>\/${<span class=\"hljs-attr\">data.public_id<\/span>}<span class=\"hljs-attr\">.jpg<\/span>`}&gt;<\/span>\n                                                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Image<\/span> <span class=\"hljs-attr\">publicId<\/span>=<span class=\"hljs-string\">{data.public_id}<\/span>&gt;<\/span>\n                                                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Transformation<\/span>\n                                                        <span class=\"hljs-attr\">crop<\/span>=<span class=\"hljs-string\">\"scale\"<\/span>\n                                                        <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"300\"<\/span>\n                                                        <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"200\"<\/span>\n                                                        <span class=\"hljs-attr\">dpr<\/span>=<span class=\"hljs-string\">\"auto\"<\/span>\n                                                        <span class=\"hljs-attr\">responsive_placeholder<\/span>=<span class=\"hljs-string\">\"blank\"<\/span>\n                                                    \/&gt;<\/span>\n                                                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Image<\/span>&gt;<\/span>\n                                            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n                                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"desc\"<\/span>&gt;<\/span>Created at {data.created_at}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                                )\n                            })\n                        }\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">CloudinaryContext<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"clearfix\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n\n        );\n    }\n}\n\nrender(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Main<\/span> \/&gt;<\/span><\/span>, <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'container'<\/span>));\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The upload code reads like this:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"> cloudinary.openUploadWidget({ <span class=\"hljs-attr\">cloud_name<\/span>: <span class=\"hljs-string\">'christekh'<\/span>, <span class=\"hljs-attr\">upload_preset<\/span>: <span class=\"hljs-string\">'idcidr0h'<\/span>, <span class=\"hljs-attr\">tags<\/span>:&#91;<span class=\"hljs-string\">'xmas'<\/span>]},\n            <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">error, result<\/span>) <\/span>{\n            . . .\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Here, you\u2019re requesting a collection of images, all tagged with <code>xmas<\/code>. That is exactly what the <code>axios<\/code> library does when the component mounts:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">axios.get(<span class=\"hljs-string\">'https:\/\/res.cloudinary.com\/cloud_name\/image\/list\/xmas.json'<\/span>)\n            .then(<span class=\"hljs-function\"><span class=\"hljs-params\">res<\/span> =&gt;<\/span> {\n                <span class=\"hljs-built_in\">console<\/span>.log(res.data.resources);\n                <span class=\"hljs-keyword\">this<\/span>.setState({<span class=\"hljs-attr\">gallery<\/span>: res.data.resources});\n            });\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p><code>axios<\/code> operates on promises. Whenever a promise is resolved in the React app, a collection of images become available for UI updates through React state.<\/p>\n<p>To render the images, configure the <code>CloudinaryContext<\/code> with the value of <code>cloud_name<\/code>, iterate over the <code>gallery<\/code> state, which stores the images, and displays them through the <code>Image<\/code> component. Separately,  apply the transformations that you desire for the images with the <code>Transformation<\/code> component.<\/p>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>For security, you cannot request images from the client. Instead, request them with Cloudinary\u2019s Admin API through a backend SDK and then send the resource list to the client. See the <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations?query=client%20side%20resou&amp;c_query=Transforming%20media%20assets%20using%20dynamic%20URLs%20%E2%80%BA%20Delivery%20types%20%E2%80%BA%20list#delivery_types\">related documentation<\/a> for details.<\/p><\/div>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/uCKacWp.png\" alt=\"Gallery\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"1029\"\/><\/p>\n<h2>Updating State With New Uploads<\/h2>\n<p>Leverage the code below to instantly update the displayed images with the new ones uploaded by the user:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">uploadWidget() {\n        <span class=\"hljs-keyword\">let<\/span> _this = <span class=\"hljs-keyword\">this<\/span>;\n        cloudinary.openUploadWidget({ <span class=\"hljs-attr\">cloud_name<\/span>: <span class=\"hljs-string\">'cloud_name'<\/span>, <span class=\"hljs-attr\">upload_preset<\/span>: <span class=\"hljs-string\">'preset'<\/span>, <span class=\"hljs-attr\">tags<\/span>:&#91;<span class=\"hljs-string\">'xmas'<\/span>]},\n            <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">error, result<\/span>) <\/span>{\n            <span class=\"hljs-comment\">\/\/ Update gallery state with newly uploaded image<\/span>\n                _this.setState({<span class=\"hljs-attr\">gallery<\/span>: _this.state.gallery.concat(result)})\n            });\n    }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Rather than passing the image information to the Cloudinary console, the above code updates the <code>gallery<\/code> state with its list of the requested images by concatenating the uploaded result to <code>gallery<\/code>.<\/p>\n<p>A React image gallery is as a handy trove for web projects. Thanks to Cloudinary\u2019s React SDK, building it is a chore-free task.<\/p>\n<hr \/>\n<h2>Referencing Related Resources<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/how_to_develop_a_react_library\">How to Develop a React Library<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/getting_a_better_react_ion_with_progressive_web_apps\">Getting a Better React-ion With Progressive Web Apps<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/reactnyc_building_modern_media_experiences_in_react_apps\">ReactNYC: Building Modern Media Experiences in React Apps<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21522,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,134,246],"class_list":["post-21521","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","tag-guest-post","tag-react"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Building a React Image Gallery With Cloudinary<\/title>\n<meta name=\"description\" content=\"Build an image gallery with React and the Cloudinary React SDK, a potent complementary tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a React Image Gallery With Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Build an image gallery with React and the Cloudinary React SDK, a potent complementary tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-10T15:31:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-02T21:20:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649720450\/Web_Assets\/blog\/React_Image_Library_2000x1100_v1\/React_Image_Library_2000x1100_v1-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Building a React Image Gallery With Cloudinary\",\"datePublished\":\"2017-05-10T15:31:20+00:00\",\"dateModified\":\"2025-03-02T21:20:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720450\/Web_Assets\/blog\/React_Image_Library_2000x1100_v1\/React_Image_Library_2000x1100_v1.jpg?_i=AA\",\"keywords\":[\"Asset Management\",\"Guest Post\",\"React\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2017\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary\",\"url\":\"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary\",\"name\":\"Building a React Image Gallery With Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720450\/Web_Assets\/blog\/React_Image_Library_2000x1100_v1\/React_Image_Library_2000x1100_v1.jpg?_i=AA\",\"datePublished\":\"2017-05-10T15:31:20+00:00\",\"dateModified\":\"2025-03-02T21:20:10+00:00\",\"description\":\"Build an image gallery with React and the Cloudinary React SDK, a potent complementary tool.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720450\/Web_Assets\/blog\/React_Image_Library_2000x1100_v1\/React_Image_Library_2000x1100_v1.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720450\/Web_Assets\/blog\/React_Image_Library_2000x1100_v1\/React_Image_Library_2000x1100_v1.jpg?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a React Image Gallery With Cloudinary\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building a React Image Gallery With Cloudinary","description":"Build an image gallery with React and the Cloudinary React SDK, a potent complementary tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary","og_locale":"en_US","og_type":"article","og_title":"Building a React Image Gallery With Cloudinary","og_description":"Build an image gallery with React and the Cloudinary React SDK, a potent complementary tool.","og_url":"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary","og_site_name":"Cloudinary Blog","article_published_time":"2017-05-10T15:31:20+00:00","article_modified_time":"2025-03-02T21:20:10+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649720450\/Web_Assets\/blog\/React_Image_Library_2000x1100_v1\/React_Image_Library_2000x1100_v1-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary"},"author":{"name":"","@id":""},"headline":"Building a React Image Gallery With Cloudinary","datePublished":"2017-05-10T15:31:20+00:00","dateModified":"2025-03-02T21:20:10+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720450\/Web_Assets\/blog\/React_Image_Library_2000x1100_v1\/React_Image_Library_2000x1100_v1.jpg?_i=AA","keywords":["Asset Management","Guest Post","React"],"inLanguage":"en-US","copyrightYear":"2017","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary","url":"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary","name":"Building a React Image Gallery With Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720450\/Web_Assets\/blog\/React_Image_Library_2000x1100_v1\/React_Image_Library_2000x1100_v1.jpg?_i=AA","datePublished":"2017-05-10T15:31:20+00:00","dateModified":"2025-03-02T21:20:10+00:00","description":"Build an image gallery with React and the Cloudinary React SDK, a potent complementary tool.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720450\/Web_Assets\/blog\/React_Image_Library_2000x1100_v1\/React_Image_Library_2000x1100_v1.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720450\/Web_Assets\/blog\/React_Image_Library_2000x1100_v1\/React_Image_Library_2000x1100_v1.jpg?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/how_to_build_an_image_library_with_react_cloudinary#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building a React Image Gallery With Cloudinary"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720450\/Web_Assets\/blog\/React_Image_Library_2000x1100_v1\/React_Image_Library_2000x1100_v1.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21521"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21521\/revisions"}],"predecessor-version":[{"id":37088,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21521\/revisions\/37088"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21522"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}