{"_id":"@alckor127/react-filemanager","_rev":"3-0664f578ec94e838c88245698cb420a4","name":"@alckor127/react-filemanager","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@alckor127/react-filemanager","version":"1.0.0","description":"Hooks for using responsivefilemanager.js in React","author":{"name":"alckor127"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/alckor127/react-filemanager.git"},"main":"dist/index.js","module":"dist/index.modern.js","source":"src/index.js","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":{"babel-eslint":"^10.0.3","cross-env":"^7.0.2","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.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"},"dependencies":{"prop-types":"^15.7.2"},"bugs":{"url":"https://github.com/alckor127/react-filemanager/issues"},"homepage":"https://github.com/alckor127/react-filemanager#readme","directories":{"example":"example"},"keywords":["react","hook","responsivefilemanager","filemanager"],"gitHead":"ee01d4ef6b76529a80262ba2171baeb6efb1bedb","_id":"@alckor127/react-filemanager@1.0.0","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-qPo5t2kVF06Uhym/b+q+sONeaVjjKfMOUgn28b0Ne1vdcGER4kZlw7BfUIjYLxKEMsdMBoIXIRr8Ii2t0/PCXQ==","shasum":"acae8e49245181b1854286be69a0dc43f64e6ec4","tarball":"https://registry.npmjs.org/@alckor127/react-filemanager/-/react-filemanager-1.0.0.tgz","fileCount":7,"unpackedSize":25229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8qeMCRA9TVsSAnZWagAARB8P+wRhtfkKgohtv3LsXnB4\nbSVyO1YnvrLcCUSO/L1kqixfXn0NSkVUu7uizOhESunjXfpLnyDgl5Sm1iWv\nt4Q0G1qDlCYhFfudmgMrxIP0AE92dW4CopCGDbsS2DaZ4w6POhIw9i0+V+pT\nbNxFc9jB/S+/sq5QclMgcDSAY7Rzj66MreetN7zNXEcWvHK5XKpUxmFjLS0o\nngplwlj9VEEGYxtLCl7ntg0ZenlCAlcf2+f/7CU8e+ErVXPJRL394FvYhtnI\nPZWHC/WO2Zu9GQlc12cyJnoGBLC1EFKZPQi3+GwX6fAkbZRlFAC1XxPUKEOl\n9fsVzTeZb2ep0tx0sKIoiZtFQHJixFVjynhHuWKtUnfxtneCy+fCQ064DoZQ\ngNT2pj/5MdKaeq6WGRDQYuDyQo0ZNSqJEYkJRqRyd3cuBx0TDewyCt20sRq8\nrbEsMIqseHUUYFplgfBfUDKOZxJSwW69DZPuitnZX1akuxAe8phfyLH5N0ZX\n7dVthAMBdS1JIRHB0Tl/w6Me7/fJDgwycTr1IcqQps4PEezwk1ztqvfqB/kY\nChSderx6Gz9mYI47iLhhU5ezsVx150VYgDbE02445VtrGvfIfkcnUlgnGDT4\nFeVWba70eHcut/T4TUm+kxW85toGYFBsWQDu3Yk++42j5DdWAz9Bs9brm7Br\njenb\r\n=4IZy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1GBVF0KscX57hkFqBQL9t/w+ZOdpPIrjKtCBnS6BFRgIhAONoqtdjF8ECV5Jygj3GtdCD632p6HPImgAiPAAg/e0l"}]},"maintainers":[{"name":"alckor127","email":"franciscorios0610@gmail.com"}],"_npmUser":{"name":"alckor127","email":"franciscorios0610@gmail.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-filemanager_1.0.0_1592960908404_0.39747818299029913"},"_hasShrinkwrap":false},"1.0.1":{"name":"@alckor127/react-filemanager","version":"1.0.1","description":"Hooks for using responsivefilemanager.js in React","author":{"name":"alckor127"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/alckor127/react-filemanager.git"},"main":"dist/index.js","module":"dist/index.modern.js","source":"src/index.js","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":{"babel-eslint":"^10.0.3","cross-env":"^7.0.2","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.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"},"dependencies":{"prop-types":"^15.7.2"},"bugs":{"url":"https://github.com/alckor127/react-filemanager/issues"},"homepage":"https://github.com/alckor127/react-filemanager#readme","directories":{"example":"example"},"keywords":["react","hook","responsivefilemanager","filemanager"],"gitHead":"298cb114b7d688fad5a2fa5e9438babfaadb2c94","_id":"@alckor127/react-filemanager@1.0.1","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-hnCKu5ZEZOIGPwBnkGHUxgc3AYfw4/Q1OxF7PBO2R2LdcAQHO3WmdXct9gMTkmXNHJxPfBjQGsPyNLaKbZlftg==","shasum":"6731709d725e18f2b97ed35c0b61818bd6f0e859","tarball":"https://registry.npmjs.org/@alckor127/react-filemanager/-/react-filemanager-1.0.1.tgz","fileCount":7,"unpackedSize":25534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8rwgCRA9TVsSAnZWagAAAFsQAKDZRytRsa+yMvSUjj49\ngA7iEPAbWIoEKmQ72dTdLmY+ZCBPav5TdjRR/qcXaQXyuGeBj+1cSPWZl3FG\nUfBIcBHbs+8uDXhzbCHnuNlYToHKtA6dB+YM/j3Hp4OBBwkFvvTT/A0KtM6w\nDgHcGxfxgepc1R21PPka0T+TbirzcXAqDxWsPxuUYHjLhLkrlq68cXYkfo7x\nJAgjbRyiBcHEguX6z0L2rJIoQpXQLu5I0vn6RYmaPBt0mfSijYosavg0tQhN\niTGNivukibH3tbC8275e3HMGsiL/7Dbi33XKS2bSpaL2Nqxqo1pcZ5JzLjhY\nnhi1nCH8Sv/fom1WIVTXrIaOGPrP6I/5H+t1DkmHHugEW7V4K3b1dhl8U6zY\nywEQLFSU6kIgfxrTsxeiWVyUGGyDWWPDZNE3+7Fgrlflx8eB9uduET2Ewoer\n5062RsAWRJtwL2Qlxzs2IFDbYGmS/Bsn7eK6S1hAF9QBL6LLNPH1kYxsnYmN\nixoekKbac+oRDhWxyOeldWLNiGkSMUR0ooQF2ylVLoqoab8tg93Vdi0JxKhu\n2W+xuTGCB910JcM4/Qe4L5cCFAddQjocEzDfDK6hIjM7/PgyoXB7eg/sE8q3\nm/pNMHgLDY/zWXuCtkYrR7/GBfVBToRiUAbRBKtQ5xzSpZXUXjbYhJzB4XSo\n6hoQ\r\n=9gju\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBhXCnkP1A5MLKEYrROUSH5ishOe46HFNQsEIcuJiHiYAiEAoETOpioayxfllIUXfBeS4nklcYStLflDFdOGz58dIdQ="}]},"maintainers":[{"name":"alckor127","email":"franciscorios0610@gmail.com"}],"_npmUser":{"name":"alckor127","email":"franciscorios0610@gmail.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-filemanager_1.0.1_1592966175649_0.4786782286751863"},"_hasShrinkwrap":false},"1.0.2":{"name":"@alckor127/react-filemanager","version":"1.0.2","description":"Using as stand-alone responsive filemanager for react","author":{"name":"alckor127"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/alckor127/react-filemanager.git"},"main":"dist/index.js","module":"dist/index.modern.js","source":"src/index.js","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":{"babel-eslint":"^10.0.3","cross-env":"^7.0.2","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.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"},"dependencies":{"prop-types":"^15.7.2"},"bugs":{"url":"https://github.com/alckor127/react-filemanager/issues"},"homepage":"https://github.com/alckor127/react-filemanager#readme","directories":{"example":"example"},"keywords":["react","hook","responsivefilemanager","filemanager"],"gitHead":"22dad9db5428dbb4b58bdf5978feb9d2c0272ab0","_id":"@alckor127/react-filemanager@1.0.2","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-w8EJQ/0pG1khnTqRnAGgB0JhaCFEZ3f3R4E54KjySf8IyVPD1TpLom0VqpztvfM4k9oDhok8HNgUbsKyxCYQEw==","shasum":"d3471e111d895b55baebaa93d6c8e5310c5fbdb9","tarball":"https://registry.npmjs.org/@alckor127/react-filemanager/-/react-filemanager-1.0.2.tgz","fileCount":7,"unpackedSize":25538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8r2kCRA9TVsSAnZWagAASnEQAIpQnhwxYB5cjxFOBnmy\nUzivrFYj2V4Qx4ikkv4KXqUMAvVoGKEXLbK0pD+KPEuene6IMmN0dELsEQC3\nqxi/n7EldrmeR9d9J8EjyPUXfU033AYqvOpYj6+jZa+RSRDEMzXojTZItT9M\nbnw5RMLgEVuUsA8ULMXOcCsozx3tZ+rDiftFnLPpNLwvkI7fbACpjt9mGmg9\n7iuC3zgTgTzMDrR0eDidlSgCVjWMYZlbRE/qaf6QK6BfURP2XOu4ONJO09jC\nqi9CrBp6R3ACKe2zduNr8PuceDj0ZlRtFVHLHPRQyaeIIvZJQLTprFh9r7qB\ndBM2nbOf4dw/53wYc2+yaH2eY1E/UdcorbvTNTeqU6A/c0KRUZQB2pve4wUP\nGsUvTON/5YRHTj3Tcn6H2AjgXv6G0+d8EqxRdLwfXTvvyicfR6cjXQg+M8Uu\neX52R5KUPLffEmNB/j/SyV6NIaeuzPnbWOQJNw9Mg6wdnZENAWIZn0XSOfak\ngPG869u5S1EB7X7/ru2o8EUTgI/tVfqP+Q/oFGk3hzCCA71muBBhzfzVFAEH\nUQZ6MfBHOBL4Fp66p6QMJVXZsmYKFwIWsdW2ZkN5meIJ4+IhoedpoqTahElK\n/88OCrCvZmVYzHJqdVZsLPShp2sLvb96mlb2KEGGImzoyFb6faj5xVaiiIeF\nSn86\r\n=rklR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDYKghOAjzCQOGnkZPLUGL4VTicITLQ9HN928+nV2BvAIhAI6FHcvqrUyJGLO41Z/p2jOQxq9fkykwybnaaG2cg31J"}]},"maintainers":[{"name":"alckor127","email":"franciscorios0610@gmail.com"}],"_npmUser":{"name":"alckor127","email":"franciscorios0610@gmail.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-filemanager_1.0.2_1592966564553_0.9896959976066813"},"_hasShrinkwrap":false}},"time":{"created":"2020-06-24T01:08:28.351Z","1.0.0":"2020-06-24T01:08:28.559Z","modified":"2022-04-04T12:36:21.297Z","1.0.1":"2020-06-24T02:36:15.781Z","1.0.2":"2020-06-24T02:42:44.675Z"},"maintainers":[{"name":"alckor127","email":"franciscorios0610@gmail.com"}],"description":"Using as stand-alone responsive filemanager for react","homepage":"https://github.com/alckor127/react-filemanager#readme","keywords":["react","hook","responsivefilemanager","filemanager"],"repository":{"type":"git","url":"git+https://github.com/alckor127/react-filemanager.git"},"author":{"name":"alckor127"},"bugs":{"url":"https://github.com/alckor127/react-filemanager/issues"},"license":"MIT","readme":"# react-filemanager\n\nUsing as stand-alone responsive filemanager for react &#128293;.\n\n[![NPM](https://img.shields.io/npm/v/@alckor127/react-filemanager.svg)](https://www.npmjs.com/package/@alckor127/react-filemanager) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Requirements\n\nBefore starting using `react-filemanager`; download, install and configure responsive filemanager on an apache server.\n\n- [Download](https://www.responsivefilemanager.com/index.php#download-section)\n- [Documentation](https://www.responsivefilemanager.com/index.php#documentation-section)\n\n## Install\n\n```bash\nnpm install --save @alckor127/react-filemanager\n```\n\nor\n\n```bash\nyarn add @alckor127/react-filemanager\n```\n\n## Usage\n\n```jsx\nimport React, { useState } from 'react'\nimport { FileManager, useFileManager } from 'react-filemanager'\n\nconst App = () => {\n  const [inputValue, setInputValue] = useState('')\n\n  const setFieldValue = (val) => setInputValue(val)\n\n  const filemanager = useFileManager({\n    setFieldValue\n  })\n\n  return (\n    <div>\n      <input\n        type='text'\n        name='image'\n        value={inputValue}\n        onFocus={() => filemanager.handleFilemanager('image')}\n        readOnly // is recommended\n      />\n      <FileManager\n        domain='https://www.responsivefilemanager.com'\n        target={filemanager.target}\n        isOpen={filemanager.isOpen}\n      />\n    </div>\n  )\n}\n\nexport default App\n```\n\n## API Reference\n\n<a name=\"use-filemanager-hook\"></a>\n\n#### `useFileManager()`\n\nA custom React Hook that returns states and helpers for using with [`FileManager`](#filemanager-component) component.\n\n- `isOpen` - is a boolean state indicating whether or not to show the filemanager.\n- `target` - is a string state indicating the input name.\n- `toggle()` - is a trigger function that controls filemanager independent visibility.\n- `handleFileManager(target)` - this function is the one that relates the behavior of the filemanager to the input. Requires that the input name be sent to it.\n\n##### Setting\n\n`useFileManager`, receive an object in the following format:\n\n```jsx\nconst [inputValue, setInputValue] = useState('')\n\nconst handleChangeInput = (val) => setInputValue(val)\n\nconst filemanager = useFileManager({\n  setFieldValue: handleChangeInput\n})\n```\n\n- `setFieldValue` - it is the function that must update the state of the input.\n- `plugin` - it is not necessary to define it. Currently, you can assign the value `formik` to indicate to the hook that it should be integrated with [`formik`](https://jaredpalmer.com/formik/), in case it is assigned the value `formik`, please note that `setFieldValue` must also be [`formik`](https://jaredpalmer.com/formik/).\n\n<a name=\"filemanager-component\"></a>\n\n#### `<FileManager />`\n\n| Prop                               | Type           | Required | Description                                                                                              |\n| :--------------------------------- | :------------- | :------: | :------------------------------------------------------------------------------------------------------- |\n| [`domain`](#domain-prop)           | String         |    ✓     | It is the domain where the responsive filemanager was installed and configured.                          |\n| [`pathdialog`](#pathdialog-prop)   | String         |          | It is the path name of `dialog.php` file. Default is `filemanager/dialog.php`.                           |\n| [`type`](#type-prop)               | Integer        |          | It is the default filter indicator: 1 (images files), 2 (all files) and 3 (video files). Default is `2`. |\n| [`crossdomain`](#crossdomain-prop) | Boolean        |          | Set it to `true` if you want to enable cross-domain file selector.                                       |\n| [`target`](#target-prop)           | String         |    ✓     | It is provided by `useFileMananger()`.                                                                   |\n| [`isOpen`](#is-open-prop)          | Boolean        |    ✓     | It is provided by `useFileMananger()`.                                                                   |\n| [`width`](#width-prop)             | Integer/String |          | Set it the width of responsive filemanager. Default is `100%`.                                           |\n| [`height`](#height-prop)           | Integer/String |          | Set it the height of responsive filemanager. Default is `500`.                                           |\n\n<a name=\"domain-prop\"></a>\n\n#### domain (required)\n\nIt is the domain where the responsive filemanager was installed and configured.\n\n```jsx\n<FileManager\n  domain='https://www.responsivefilemanager.com'\n  target={filemanager.target} // useFileManager() return this value.\n  isOpen={filemanager.isOpen} // useFileManager() return this value.\n/>\n```\n\n<a name=\"pathdialog-prop\"></a>\n\n#### pathdialog\n\nWe will assume that in the responsive filemanager configuration on the server, the path of the `filemanager/dialog.php` file is changed to the following: `uploads/dialog.php`.\n\n```jsx\n<FileManager\n  domain='https://www.responsivefilemanager.com'\n  pathdialog='uploads/dialog.php'\n  target={filemanager.target} // useFileManager() return this value.\n  isOpen={filemanager.isOpen} // useFileManager() return this value.\n/>\n```\n\n<a name=\"type-prop\"></a>\n\n#### type\n\nFor example if you want to show only the video files, then type must be set with the value of 3.\n\n```jsx\n<FileManager\n  domain='https://www.responsivefilemanager.com'\n  type={3}\n  target={filemanager.target} // useFileManager() return this value.\n  isOpen={filemanager.isOpen} // useFileManager() return this value.\n/>\n```\n\n<a name=\"crossdomain-prop\"></a>\n\n#### crossdomain\n\nFor example to enable the cross-domain file selector, you must set `crossdomain` to `true`.\n\n```jsx\n<FileManager\n  domain='https://www.responsivefilemanager.com'\n  crossdomain\n  target={filemanager.target} // useFileManager() return this value.\n  isOpen={filemanager.isOpen} // useFileManager() return this value.\n/>\n```\n\n<a name=\"target-prop\"></a>\n\n#### target (required)\n\nThe value of `target` is obtained through the hook [`useFileManager`](#use-filemanager-hook).\n\n```jsx\nconst filemanager = useFileManager({\n  setFieldValue: (val) => console.log(val)\n})\n\n<FileManager\n  domain='https://www.responsivefilemanager.com'\n  target={filemanager.target}\n  isOpen={filemanager.isOpen}\n/>\n```\n\n<a name=\"is-open-prop\"></a>\n\n#### isOpen (required)\n\nThe value of `isOpen` is obtained through the hook [`useFileManager`](#use-filemanager-hook).\n\n```jsx\nconst filemanager = useFileManager({\n  setFieldValue: (val) => console.log(val)\n})\n\n<FileManager\n  domain='https://www.responsivefilemanager.com'\n  target={filemanager.target}\n  isOpen={filemanager.isOpen}\n/>\n```\n\n## Examples\n\n- [Basic](https://codesandbox.io/s/basic-ofp24)\n- [Only filemanager control](https://codesandbox.io/s/only-filemanager-control-ch8bc)\n- [Integration with formik](https://codesandbox.io/s/integration-with-formik-hdz8d)\n- [Use modal from reacstrap](https://codesandbox.io/s/use-modal-from-reactstrap-0wo3r)\n\n## License\n\nMIT © [Alckor127](https://github.com/alckor127) 2020\n","readmeFilename":"README.md"}