{"_id":"@alliance-software-development/asd-media-react","_rev":"7-c008bbde8c4c87f293a09de022526502","time":{"created":"2022-02-10T18:29:10.327Z","1.0.0":"2022-02-10T18:05:15.827Z","modified":"2022-10-17T08:25:11.551Z","1.0.1":"2022-02-10T18:29:10.488Z"},"name":"@alliance-software-development/asd-media-react","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@alliance-software-development/asd-media-react","version":"1.0.1","description":"A wrapper around @uploadcare/react-widget","author":{"name":"ASD Developer","email":"dev@imaginationeverywhere.info"},"license":"ISC","repository":{"type":"git","url":"git+https://github.com/imaginationeverywhere/asd-media-react.git"},"main":"dist/index.js","module":"dist/index.modern.js","source":"src/index.tsx","engines":{"node":">=10"},"scripts":{"build":"microbundle-crl --no-compress --format modern,cjs","start":"microbundle-crl watch --no-compress --format modern,cjs","prepare":"run-s build","test":"run-s test:unit test:lint test:build","test:build":"run-s build","test:lint":"eslint .","test:unit":"cross-env CI=1 react-scripts test --env=jsdom","test:watch":"react-scripts test --env=jsdom","predeploy":"cd example && npm install && npm run build","deploy":"gh-pages -d example/build"},"peerDependencies":{"react":"^16.0.0"},"devDependencies":{"@testing-library/jest-dom":"^4.2.4","@testing-library/react":"^9.5.0","@testing-library/user-event":"^7.2.1","@types/jest":"^25.1.4","@types/node":"^12.12.38","@types/react":"^16.9.27","@types/react-dom":"^16.9.7","@typescript-eslint/eslint-plugin":"^2.26.0","@typescript-eslint/parser":"^2.26.0","babel-eslint":"^10.0.3","cross-env":"^7.0.2","eslint":"^6.8.0","eslint-config-prettier":"^6.7.0","eslint-config-standard":"^14.1.0","eslint-config-standard-react":"^9.2.0","eslint-plugin-import":"^2.18.2","eslint-plugin-node":"^11.0.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.17.0","eslint-plugin-standard":"^4.0.1","gh-pages":"^2.2.0","microbundle-crl":"^0.13.10","npm-run-all":"^4.1.5","prettier":"^2.0.4","react":"^16.13.1","react-dom":"^16.13.1","react-scripts":"^3.4.1","typescript":"^3.7.5"},"dependencies":{"@uploadcare/react-widget":"^1.3.9"},"types":"./dist/index.d.ts","gitHead":"e33ec75f1336f94fe423a7046f113265ec0cc508","bugs":{"url":"https://github.com/imaginationeverywhere/asd-media-react/issues"},"homepage":"https://github.com/imaginationeverywhere/asd-media-react#readme","_id":"@alliance-software-development/asd-media-react@1.0.1","_nodeVersion":"16.13.2","_npmVersion":"8.4.0","dist":{"integrity":"sha512-tMmmtgzbgmHpzQhjpHKyNgGfdY3UoexVFuH7oIIDQTGOGOy4/P8r2IwfEXDaKZ8CpbI53rLx9y33S3VhcKzk7Q==","shasum":"118118ecefdae800b84959292af7fa135222f3cf","tarball":"https://registry.npmjs.org/@alliance-software-development/asd-media-react/-/asd-media-react-1.0.1.tgz","fileCount":9,"unpackedSize":6620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBVl2CRA9TVsSAnZWagAArrYP/RKfj66mNuo7xqmQffGA\nwdKi3g8EQLQyLghKywMs1mEvHFymE9BThje1ADx/sfan92N6mGUQAjuZ9DB+\nBRZIT+mduNID5jcc3BEAREFWTdYsjwoaHhkgrXA18DkQiU+lnsLPyVlSLg15\nN7KbIB5aQBrdJaiJjaoRmfZP8PKQKw4YGhfmqEUm1xPwY5DHgxcs/juYWpww\n0hzECyK/IsVAZ83ZVcqIas/tP0ORQIzpy2xJsUR1GRF3JMKLcUdt4z8TUYhg\n5GQIM3W5oWOuwbdliqKHzGxGoh75qk+YN8GQv7o9nwmr6hj4o4+CODl29Kt5\nJcNV2UiqfhDZC1KeauEWqoAVQ1NGTTEJRfsmYnhfOk3JA6r2hBbhcPoWKR6r\nUNOOUBkYNV2v1Jky9aIsSuPaOg6LzE3vNKDAzZOV21dNm4FwGT6/0Wyati7P\nh8C46opXe6MbEZcK1QHR/hr2MCFij73woOE10H4zvRHsYqaVK+cHyci78a9z\nOqeEBA9JsLWh8ZfNyMrKzANuO7LxPV+xZuUwbwL3y5z8VunTPe6aRFxV1E3r\nE6EX9X88zRMgR97BiHORSAS8EwIwcY82MQpcvU1HqeLRqMZoZHvSmVp1RPpQ\nnN7mRyTLws0ko6fK2VEDvsPgG9p14D2v+nzCP7mCCb64+scIpBQV6P6CFR+c\n1V4n\r\n=nKKb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICRX2gM69N91QqKyRkOEeakMEfLAf33C/L3uQ7DfLTQEAiAhFAxHj9ayoak2DTtiNI4KawxQtCsNpxddtDUlL4+7eQ=="}]},"_npmUser":{"name":"abdulsamadola","email":"360campstore@gmail.com"},"directories":{},"maintainers":[{"name":"kelvin_img","email":"kevin@imaginationeverywhere.info"},{"name":"abdulsamadola","email":"360campstore@gmail.com"},{"name":"gabrielquiksession","email":"gabriel@quiksession.com"},{"name":"asddev","email":"development@alliancesoftwaredevelopment.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/asd-media-react_1.0.1_1644517750328_0.06632807587328893"},"_hasShrinkwrap":false}},"maintainers":[{"email":"jjchinosoviolet@gmail.com","name":"cvjude"},{"email":"abudusamuelbiodun@gmail.com","name":"blvckleumas"},{"email":"kevin@imaginationeverywhere.info","name":"kelvin_img"},{"email":"360campstore@gmail.com","name":"abdulsamadola"},{"email":"development@alliancesoftwaredevelopment.com","name":"asddev"}],"description":"A wrapper around @uploadcare/react-widget","homepage":"https://github.com/imaginationeverywhere/asd-media-react#readme","repository":{"type":"git","url":"git+https://github.com/imaginationeverywhere/asd-media-react.git"},"author":{"name":"ASD Developer","email":"dev@imaginationeverywhere.info"},"bugs":{"url":"https://github.com/imaginationeverywhere/asd-media-react/issues"},"license":"ISC","readme":"# ASD Media File Uploader for React\n\n> A wrapper around [@uploadcare/react-widget](https://github.com/uploadcare/react-widget)\n>\n> This component helps you integrate Uploadcare Widget into your React app natively; props management and lazy loading are bundled.\n>\n> The component allows users to upload files from their devices, social media, cloud storage, and more. All that without any backend code that’s usually required to handle uploads.\n\n[![NPM](https://img.shields.io/npm/v/@alliance-software-development/asd-media-react.svg)](https://www.npmjs.com/package/asd-media) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Install\n\n```bash\nnpm install --save @alliance-software-development/asd-media-react\n```\nOR\n```bash\nyarn add @alliance-software-development/asd-media-react\n```\n\n## Usage\n\n```tsx\nimport React, { Component } from 'react'\nimport { ASDMedia } from '@alliance-software-development/asd-media-react'\n\nconst App = ()=> {\n  const [image, setImage] = React.useState('')\n  const asdMediaRef = React.useRef();\n\n  const translation = {\n    buttons: {\n      choose: {\n        images: {\n          one: '<div className=\"image\"><img src=\"/assets/images/camera.svg\" alt=\"camera\" /><br/>Upload photo</div>'\n        }\n      }\n    }\n  }\n\n  return(\n    <div>\n      <div className='image' onClick={() => asdMediaRef.current?.openDialog()}>\n        <img src={image} alt='uploaded' />\n      </div>\n    <ASDMedia\n      ref={asdMediaRef}\n      publicKey='UPLOAD_CARE_PUBLIC_KEY'\n      onChange={console.log}\n      localeTranslations={translation}\n      imagesOnly\n      previewStep\n      onFileSelect={(file) => {\n        if (!file) {\n          console.log('File removed from widget')\n          return\n        }\n        file.done((fileInfo) => {\n          setImage(fileInfo.cdnUrl)\n        })\n      }}\n      clearable\n    />\n    </div>\n  )\n}\n```\n\n## Props\nTo know more about the available props [check here](https://github.com/uploadcare/react-widget)\n\n## To run the example\n\nRun the following commands to install dependencies and run the app in the browser\n\n```\ncd example && npm install\nnpm start\n```\n","readmeFilename":"README.md"}