Bump integration-tools to 2.0.0
This commit is contained in:
Angelos Chalaris
253
package-lock.json
generated
253
package-lock.json
generated
@ -5,9 +5,9 @@
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"@30-seconds/integration-tools": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@30-seconds/integration-tools/-/integration-tools-1.3.2.tgz",
|
||||
"integrity": "sha512-EmqyRc1L/o+UGpC2eJ7jrfVcHEvIVLwbCHEyFfzqxdlbvY/snIXzUFp93U610COVlZygSIe+pKf06PAYO8ugHw==",
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@30-seconds/integration-tools/-/integration-tools-2.0.0.tgz",
|
||||
"integrity": "sha512-H8zGBo5ZFwa9S0juRFK8KWlnlA4GZijVrRWdiQeQ/UofernNnUg8Yck1YSNwoWl/vCIKEGlmCqB+sVQz6Jx5yA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/core": "^7.7.4",
|
||||
@ -29,22 +29,23 @@
|
||||
}
|
||||
},
|
||||
"@babel/core": {
|
||||
"version": "7.8.7",
|
||||
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.8.7.tgz",
|
||||
"integrity": "sha512-rBlqF3Yko9cynC5CCFy6+K/w2N+Sq/ff2BPy+Krp7rHlABIr5epbA7OxVeKoMHB39LZOp1UY5SuLjy6uWi35yA==",
|
||||
"version": "7.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.9.0.tgz",
|
||||
"integrity": "sha512-kWc7L0fw1xwvI0zi8OKVBuxRVefwGOrKSQMvrQ3dW+bIIavBY3/NpXmpjMy7bQnLgwgzWQZ8TlM57YHpHNHz4w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/code-frame": "^7.8.3",
|
||||
"@babel/generator": "^7.8.7",
|
||||
"@babel/helpers": "^7.8.4",
|
||||
"@babel/parser": "^7.8.7",
|
||||
"@babel/generator": "^7.9.0",
|
||||
"@babel/helper-module-transforms": "^7.9.0",
|
||||
"@babel/helpers": "^7.9.0",
|
||||
"@babel/parser": "^7.9.0",
|
||||
"@babel/template": "^7.8.6",
|
||||
"@babel/traverse": "^7.8.6",
|
||||
"@babel/types": "^7.8.7",
|
||||
"@babel/traverse": "^7.9.0",
|
||||
"@babel/types": "^7.9.0",
|
||||
"convert-source-map": "^1.7.0",
|
||||
"debug": "^4.1.0",
|
||||
"gensync": "^1.0.0-beta.1",
|
||||
"json5": "^2.1.0",
|
||||
"json5": "^2.1.2",
|
||||
"lodash": "^4.17.13",
|
||||
"resolve": "^1.3.2",
|
||||
"semver": "^5.4.1",
|
||||
@ -52,26 +53,26 @@
|
||||
}
|
||||
},
|
||||
"@babel/generator": {
|
||||
"version": "7.8.7",
|
||||
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.8.7.tgz",
|
||||
"integrity": "sha512-DQwjiKJqH4C3qGiyQCAExJHoZssn49JTMJgZ8SANGgVFdkupcUhLOdkAeoC6kmHZCPfoDG5M0b6cFlSN5wW7Ew==",
|
||||
"version": "7.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.9.5.tgz",
|
||||
"integrity": "sha512-GbNIxVB3ZJe3tLeDm1HSn2AhuD/mVcyLDpgtLXa5tplmWrJdF/elxB56XNqCuD6szyNkDi6wuoKXln3QeBmCHQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/types": "^7.8.7",
|
||||
"@babel/types": "^7.9.5",
|
||||
"jsesc": "^2.5.1",
|
||||
"lodash": "^4.17.13",
|
||||
"source-map": "^0.5.0"
|
||||
}
|
||||
},
|
||||
"@babel/helper-function-name": {
|
||||
"version": "7.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.8.3.tgz",
|
||||
"integrity": "sha512-BCxgX1BC2hD/oBlIFUgOCQDOPV8nSINxCwM3o93xP4P9Fq6aV5sgv2cOOITDMtCfQ+3PvHp3l689XZvAM9QyOA==",
|
||||
"version": "7.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.9.5.tgz",
|
||||
"integrity": "sha512-JVcQZeXM59Cd1qanDUxv9fgJpt3NeKUaqBqUEvfmQ+BCOKq2xUgaWZW2hr0dkbyJgezYuplEoh5knmrnS68efw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-get-function-arity": "^7.8.3",
|
||||
"@babel/template": "^7.8.3",
|
||||
"@babel/types": "^7.8.3"
|
||||
"@babel/types": "^7.9.5"
|
||||
}
|
||||
},
|
||||
"@babel/helper-get-function-arity": {
|
||||
@ -83,6 +84,70 @@
|
||||
"@babel/types": "^7.8.3"
|
||||
}
|
||||
},
|
||||
"@babel/helper-member-expression-to-functions": {
|
||||
"version": "7.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.8.3.tgz",
|
||||
"integrity": "sha512-fO4Egq88utkQFjbPrSHGmGLFqmrshs11d46WI+WZDESt7Wu7wN2G2Iu+NMMZJFDOVRHAMIkB5SNh30NtwCA7RA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/types": "^7.8.3"
|
||||
}
|
||||
},
|
||||
"@babel/helper-module-imports": {
|
||||
"version": "7.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz",
|
||||
"integrity": "sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/types": "^7.8.3"
|
||||
}
|
||||
},
|
||||
"@babel/helper-module-transforms": {
|
||||
"version": "7.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.9.0.tgz",
|
||||
"integrity": "sha512-0FvKyu0gpPfIQ8EkxlrAydOWROdHpBmiCiRwLkUiBGhCUPRRbVD2/tm3sFr/c/GWFrQ/ffutGUAnx7V0FzT2wA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-module-imports": "^7.8.3",
|
||||
"@babel/helper-replace-supers": "^7.8.6",
|
||||
"@babel/helper-simple-access": "^7.8.3",
|
||||
"@babel/helper-split-export-declaration": "^7.8.3",
|
||||
"@babel/template": "^7.8.6",
|
||||
"@babel/types": "^7.9.0",
|
||||
"lodash": "^4.17.13"
|
||||
}
|
||||
},
|
||||
"@babel/helper-optimise-call-expression": {
|
||||
"version": "7.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.3.tgz",
|
||||
"integrity": "sha512-Kag20n86cbO2AvHca6EJsvqAd82gc6VMGule4HwebwMlwkpXuVqrNRj6CkCV2sKxgi9MyAUnZVnZ6lJ1/vKhHQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/types": "^7.8.3"
|
||||
}
|
||||
},
|
||||
"@babel/helper-replace-supers": {
|
||||
"version": "7.8.6",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.8.6.tgz",
|
||||
"integrity": "sha512-PeMArdA4Sv/Wf4zXwBKPqVj7n9UF/xg6slNRtZW84FM7JpE1CbG8B612FyM4cxrf4fMAMGO0kR7voy1ForHHFA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-member-expression-to-functions": "^7.8.3",
|
||||
"@babel/helper-optimise-call-expression": "^7.8.3",
|
||||
"@babel/traverse": "^7.8.6",
|
||||
"@babel/types": "^7.8.6"
|
||||
}
|
||||
},
|
||||
"@babel/helper-simple-access": {
|
||||
"version": "7.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz",
|
||||
"integrity": "sha512-VNGUDjx5cCWg4vvCTR8qQ7YJYZ+HBjxOgXEl7ounz+4Sn7+LMD3CFrCTEU6/qXKbA2nKg21CwhhBzO0RpRbdCw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/template": "^7.8.3",
|
||||
"@babel/types": "^7.8.3"
|
||||
}
|
||||
},
|
||||
"@babel/helper-split-export-declaration": {
|
||||
"version": "7.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz",
|
||||
@ -92,32 +157,38 @@
|
||||
"@babel/types": "^7.8.3"
|
||||
}
|
||||
},
|
||||
"@babel/helper-validator-identifier": {
|
||||
"version": "7.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz",
|
||||
"integrity": "sha512-/8arLKUFq882w4tWGj9JYzRpAlZgiWUJ+dtteNTDqrRBz9Iguck9Rn3ykuBDoUwh2TO4tSAJlrxDUOXWklJe4g==",
|
||||
"dev": true
|
||||
},
|
||||
"@babel/helpers": {
|
||||
"version": "7.8.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.8.4.tgz",
|
||||
"integrity": "sha512-VPbe7wcQ4chu4TDQjimHv/5tj73qz88o12EPkO2ValS2QiQS/1F2SsjyIGNnAD0vF/nZS6Cf9i+vW6HIlnaR8w==",
|
||||
"version": "7.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.9.2.tgz",
|
||||
"integrity": "sha512-JwLvzlXVPjO8eU9c/wF9/zOIN7X6h8DYf7mG4CiFRZRvZNKEF5dQ3H3V+ASkHoIB3mWhatgl5ONhyqHRI6MppA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/template": "^7.8.3",
|
||||
"@babel/traverse": "^7.8.4",
|
||||
"@babel/types": "^7.8.3"
|
||||
"@babel/traverse": "^7.9.0",
|
||||
"@babel/types": "^7.9.0"
|
||||
}
|
||||
},
|
||||
"@babel/highlight": {
|
||||
"version": "7.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.8.3.tgz",
|
||||
"integrity": "sha512-PX4y5xQUvy0fnEVHrYOarRPXVWafSjTW9T0Hab8gVIawpl2Sj0ORyrygANq+KjcNlSSTw0YCLSNA8OyZ1I4yEg==",
|
||||
"version": "7.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.9.0.tgz",
|
||||
"integrity": "sha512-lJZPilxX7Op3Nv/2cvFdnlepPXDxi29wxteT57Q965oc5R9v86ztx0jfxVrTcBk8C2kcPkkDa2Z4T3ZsPPVWsQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.9.0",
|
||||
"chalk": "^2.0.0",
|
||||
"esutils": "^2.0.2",
|
||||
"js-tokens": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"@babel/parser": {
|
||||
"version": "7.8.7",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.7.tgz",
|
||||
"integrity": "sha512-9JWls8WilDXFGxs0phaXAZgpxTZhSk/yOYH2hTHC0X1yC7Z78IJfvR1vJ+rmJKq3I35td2XzXzN6ZLYlna+r/A==",
|
||||
"version": "7.9.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.9.4.tgz",
|
||||
"integrity": "sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA==",
|
||||
"dev": true
|
||||
},
|
||||
"@babel/template": {
|
||||
@ -132,29 +203,29 @@
|
||||
}
|
||||
},
|
||||
"@babel/traverse": {
|
||||
"version": "7.8.6",
|
||||
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.8.6.tgz",
|
||||
"integrity": "sha512-2B8l0db/DPi8iinITKuo7cbPznLCEk0kCxDoB9/N6gGNg/gxOXiR/IcymAFPiBwk5w6TtQ27w4wpElgp9btR9A==",
|
||||
"version": "7.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.9.5.tgz",
|
||||
"integrity": "sha512-c4gH3jsvSuGUezlP6rzSJ6jf8fYjLj3hsMZRx/nX0h+fmHN0w+ekubRrHPqnMec0meycA2nwCsJ7dC8IPem2FQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/code-frame": "^7.8.3",
|
||||
"@babel/generator": "^7.8.6",
|
||||
"@babel/helper-function-name": "^7.8.3",
|
||||
"@babel/generator": "^7.9.5",
|
||||
"@babel/helper-function-name": "^7.9.5",
|
||||
"@babel/helper-split-export-declaration": "^7.8.3",
|
||||
"@babel/parser": "^7.8.6",
|
||||
"@babel/types": "^7.8.6",
|
||||
"@babel/parser": "^7.9.0",
|
||||
"@babel/types": "^7.9.5",
|
||||
"debug": "^4.1.0",
|
||||
"globals": "^11.1.0",
|
||||
"lodash": "^4.17.13"
|
||||
}
|
||||
},
|
||||
"@babel/types": {
|
||||
"version": "7.8.7",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.7.tgz",
|
||||
"integrity": "sha512-k2TreEHxFA4CjGkL+GYjRyx35W0Mr7DP5+9q6WMkyKXB+904bYmG40syjMFV0oLlhhFCwWl0vA0DyzTDkwAiJw==",
|
||||
"version": "7.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.5.tgz",
|
||||
"integrity": "sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"esutils": "^2.0.2",
|
||||
"@babel/helper-validator-identifier": "^7.9.5",
|
||||
"lodash": "^4.17.13",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
@ -172,9 +243,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"ajv": {
|
||||
"version": "6.12.0",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.0.tgz",
|
||||
"integrity": "sha512-D6gFiFA0RRLyUbvijN74DWAjXSFxWKaWP7mldxkVhyhAV3+SWA9HEJPHQ2c9soIeTFJqcSdFDGFgdqs1iUU2Hw==",
|
||||
"version": "6.12.2",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.2.tgz",
|
||||
"integrity": "sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fast-deep-equal": "^3.1.1",
|
||||
@ -334,9 +405,9 @@
|
||||
}
|
||||
},
|
||||
"caniuse-db": {
|
||||
"version": "1.0.30001033",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30001033.tgz",
|
||||
"integrity": "sha512-2ZReq+OHqHhsIQSiv8OVNhQ6Ht9eYJpwblZydHV8nI44Od6J5YUl3J9Wxvjry/v969jCHH5fR9+C6FwJ41XbOQ==",
|
||||
"version": "1.0.30001045",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30001045.tgz",
|
||||
"integrity": "sha512-bwCb2ssU32vcxjG1P2VBOi1YV9W7G3RCG9m2++cX6Kql1oR+5w7vUBFL2SO47svJRUw+ai/d7yNT5VqoA2g3Sw==",
|
||||
"dev": true
|
||||
},
|
||||
"caseless": {
|
||||
@ -372,9 +443,9 @@
|
||||
}
|
||||
},
|
||||
"cli-width": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
|
||||
"integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=",
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz",
|
||||
"integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==",
|
||||
"dev": true
|
||||
},
|
||||
"cliui": {
|
||||
@ -574,12 +645,6 @@
|
||||
"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
|
||||
"dev": true
|
||||
},
|
||||
"esutils": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
|
||||
"integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
|
||||
"dev": true
|
||||
},
|
||||
"extend": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
|
||||
@ -887,9 +952,9 @@
|
||||
}
|
||||
},
|
||||
"in-publish": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
|
||||
"integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.1.tgz",
|
||||
"integrity": "sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ==",
|
||||
"dev": true
|
||||
},
|
||||
"indent-string": {
|
||||
@ -1103,12 +1168,12 @@
|
||||
"dev": true
|
||||
},
|
||||
"json5": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/json5/-/json5-2.1.1.tgz",
|
||||
"integrity": "sha512-l+3HXD0GEI3huGq1njuqtzYK8OYJyXMkOLtQ53pjWh89tvWS2h6l+1zMkYWqlb57+SiQodKZyvMEFb2X+KrFhQ==",
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
|
||||
"integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"minimist": "^1.2.0"
|
||||
"minimist": "^1.2.5"
|
||||
}
|
||||
},
|
||||
"jsonfile": {
|
||||
@ -1241,26 +1306,18 @@
|
||||
}
|
||||
},
|
||||
"minimist": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
|
||||
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
|
||||
"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
|
||||
"dev": true
|
||||
},
|
||||
"mkdirp": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
|
||||
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
|
||||
"version": "0.5.5",
|
||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
|
||||
"integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
|
||||
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
|
||||
"dev": true
|
||||
}
|
||||
"minimist": "^1.2.5"
|
||||
}
|
||||
},
|
||||
"ms": {
|
||||
@ -1276,9 +1333,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"nan": {
|
||||
"version": "2.14.0",
|
||||
"resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",
|
||||
"integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==",
|
||||
"version": "2.14.1",
|
||||
"resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz",
|
||||
"integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==",
|
||||
"dev": true
|
||||
},
|
||||
"node-gyp": {
|
||||
@ -1557,9 +1614,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"psl": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/psl/-/psl-1.7.0.tgz",
|
||||
"integrity": "sha512-5NsSEDv8zY70ScRnOTn7bK7eanl2MvFrOrS/R6x+dBt5g1ghnj9Zv90kO8GwT8gxcu2ANyFprnFYB85IogIJOQ==",
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
|
||||
"integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==",
|
||||
"dev": true
|
||||
},
|
||||
"punycode": {
|
||||
@ -1670,9 +1727,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.15.1",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.1.tgz",
|
||||
"integrity": "sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==",
|
||||
"version": "1.16.1",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.16.1.tgz",
|
||||
"integrity": "sha512-rmAglCSqWWMrrBv/XM6sW0NuRFiKViw/W4d9EbC4pt+49H8JwHy+mcGmALTEg504AUDcLTvb1T2q3E9AnmY+ig==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"path-parse": "^1.0.6"
|
||||
@ -1707,9 +1764,9 @@
|
||||
}
|
||||
},
|
||||
"rxjs": {
|
||||
"version": "6.5.4",
|
||||
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz",
|
||||
"integrity": "sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==",
|
||||
"version": "6.5.5",
|
||||
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.5.tgz",
|
||||
"integrity": "sha512-WfQI+1gohdf0Dai/Bbmk5L5ItH5tYqm3ki2c5GdWhKjalzjg93N3avFjVStyZZz+A2Em+ZxKH5bNghw9UeylGQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
@ -1773,9 +1830,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"signal-exit": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
|
||||
"integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
|
||||
"integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
|
||||
"dev": true
|
||||
},
|
||||
"source-map": {
|
||||
@ -1795,9 +1852,9 @@
|
||||
}
|
||||
},
|
||||
"spdx-exceptions": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz",
|
||||
"integrity": "sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA==",
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
|
||||
"integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
|
||||
"dev": true
|
||||
},
|
||||
"spdx-expression-parse": {
|
||||
|
||||
@ -6,11 +6,10 @@
|
||||
"url": "git+https://github.com/30-seconds/30-seconds-of-react.git"
|
||||
},
|
||||
"scripts": {
|
||||
"extractor": "extract-snippet-data config.js",
|
||||
"linter": "prettier **/*.{js,json,css,md} --write"
|
||||
"extractor": "extract-snippet-data config.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@30-seconds/integration-tools": "^1.3.2"
|
||||
"@30-seconds/integration-tools": "^2.0.0"
|
||||
},
|
||||
"prettier": {
|
||||
"singleQuote": true,
|
||||
|
||||
@ -1,725 +0,0 @@
|
||||
{
|
||||
"data": [
|
||||
{
|
||||
"id": "Accordion",
|
||||
"type": "snippetListing",
|
||||
"title": "Accordion",
|
||||
"attributes": {
|
||||
"text": "Renders an accordion menu with multiple collapsible content components.\n\n- Define an `AccordionItem` component, pass it to the `Accordion` and remove unnecessary nodes expect for `AccordionItem` by identifying the function's name in `props.children`.\n- Each `AccordionItem` component renders a `<button>` that is used to update the `Accordion` via the `props.handleClick` callback and the content of the component, passed down via `props.children`, while its appearance is determined by `props.isCollapsed` and based on `style`.\n- In the `Accordion` component, use the `React.useState()` hook to initialize the value of the `bindIndex` state variable to `props.defaultIndex`.\n- Use `Array.prototype.map` on the collected nodes to render the individual collapsiple elements.\n- Define `changeItem`, which will be executed when clicking an `AccordionItem`'s `<button>`.\n `changeItem` executes the passed callback, `onItemClick` and updates `bindIndex` based on the clicked element.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"children",
|
||||
"state",
|
||||
"advanced"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "b83c2546a50390dcda27afa3bd654fc6b70474e624cdd80ef6862f7d14c2c7c6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "Alert",
|
||||
"type": "snippetListing",
|
||||
"title": "Alert",
|
||||
"attributes": {
|
||||
"text": "Creates an alert component with `type` prop.\n\n- Define appropriate CSS styles and animations for the component's elements.\n- Use the `React.setState()` hook to create the `isShown` and `isLeaving` state variables and set their values to `false`.\n- Define `timeoutId` to keep the timer instance for clearing on component unmount.\n- Use the `React.setEffect()` hook to update the value of `isShown` to `true` and clear interval by using `timeoutId` when component is unmounted.\n- Define `closeNotification` function to set the component is removed from DOM by displaying fading out animation and set `isShown` to `false` via `setTimeout()`.\n- Define the component, which renders the alert component with user defined `message` and a close button to remove the component from DOM.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"beginner",
|
||||
"state",
|
||||
"effect"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "0a62f9c029b8dbb943566f1e9b8ea38d21bd1d97e3acbd8ded3273547f452d49"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "AutoLink",
|
||||
"type": "snippetListing",
|
||||
"title": "AutoLink",
|
||||
"attributes": {
|
||||
"text": "Renders a string as plaintext, with URLs converted to appropriate `<a>` elements.\n\n- Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string.\n- Return a `<React.Fragment>` with matched URLs rendered as `<a>` elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"string",
|
||||
"fragment",
|
||||
"regexp",
|
||||
"advanced"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "922aeac82b3a5a51e05d84e1795a84eab79106d8052edb857a7cd7db6bf41917"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "Carousel",
|
||||
"type": "snippetListing",
|
||||
"title": "Carousel",
|
||||
"attributes": {
|
||||
"text": "Renders a carousel component.\n\n- Use the `React.useState()` hook to create the `active` state variable and give it a value of `0` (index of the first item).\n- Use an object, `style`, to hold the styles for the individual components.\n- Use the `React.useEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`.\n- Destructure `props`, compute if visibility style should be set to `visible` or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.\n- Render the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"children",
|
||||
"state",
|
||||
"effect",
|
||||
"intermediate"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "18bc23f64d46aa17912ec9f854cde7ebff2395ef3936da2e7e60870221e9f47b"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "Collapse",
|
||||
"type": "snippetListing",
|
||||
"title": "Collapse",
|
||||
"attributes": {
|
||||
"text": "Renders a component with collapsible content.\n\n- Use the `React.setState()` hook to create the `isCollapsed` state variable with an initial value of `props.collapsed`.\n- Use an object, `style`, to hold the styles for individual components and their states.\n- Use a `<div>` to wrap both the `<button>` that alters the component's `isCollapsed` state and the content of the component, passed down via `props.children`.\n- Determine the appearance of the content, based on `isCollapsed` and apply the appropriate CSS rules from the `style` object.\n- Finally, update the value of the `aria-expanded` attribute based on `isCollapsed` to make the component accessible.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"children",
|
||||
"state",
|
||||
"intermediate"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "d6efbb46da30a701cc691ad94b860fb6f0b34459e88caa8d744411734503af8f"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "ControlledInput",
|
||||
"type": "snippetListing",
|
||||
"title": "ControlledInput",
|
||||
"attributes": {
|
||||
"text": "Renders an `<input>` element with internal state, that uses a callback function to pass its value to the parent component.\n\n- Use object destructuring to set defaults for certain attributes of the `<input>` element.\n- Use the `React.setState()` hook to create the `value` state variable and give it a value of equal to the `defaultValue` prop.\n- Use the `React.useEffect()` hook with a second parameter set to the `value` state variable to call the `callback` function every time `value` is updated.\n- Render an `<input>` element with the appropriate attributes and use the the `onChange` event to upda the `value` state variable.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"state",
|
||||
"effect",
|
||||
"intermediate"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "25ac64175964945e36212d776ef5192d54628e1d08561489a022765c45368692"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "CountDown",
|
||||
"type": "snippetListing",
|
||||
"title": "CountDown",
|
||||
"attributes": {
|
||||
"text": "Renders a countdown timer that prints a message when it reaches zero.\n\n- Use object destructuring to set defaults for the `hours`, `minutes` and `seconds` props.\n- Use the `React.useState()` hook to create the `time`, `paused` and `over` state variables and set their values to the values of the passed props, `false` and `false` respectively.\n- Create a method `tick`, that updates the value of `time` based on the current value (i.e. decreasing the time by one second).\n- If `paused` or `over` is `true`, `tick` will return immediately.\n- Create a method `reset`, that resets all state variables to their initial states.\n- Use the the `React.useEffect()` hook to call the `tick` method every second via the use of `setInterval()` and use `clearInterval()` to cleanup when the component is unmounted.\n- Use a `<div>` to wrap a `<p>` element with the textual representation of the components `time` state variable, as well as two `<button>` elements that will pause/unpause and restart the timer respectively.\n- If `over` is `true`, the timer will display a message instead of the value of `time`.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"state",
|
||||
"advanced"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "fb5aeef0abd03d44daaff0bd027c7633fe4b079f07c13f2cb3166a56363453ef"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "DataList",
|
||||
"type": "snippetListing",
|
||||
"title": "DataList",
|
||||
"attributes": {
|
||||
"text": "Renders a list of elements from an array of primitives.\n\n- Use the value of the `isOrdered` prop to conditionally render a `<ol>` or `<ul>` list.\n- Use `Array.prototype.map` to render every item in `data` as a `<li>` element, give it a `key` produced from the concatenation of the its index and value.\n- Omit the `isOrdered` prop to render a `<ul>` list by default.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"array",
|
||||
"beginner"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "9c5d1b4aee999583a6f01ef38b0060a2eedcb27e215246e0cf31a5e43e53c0f5"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "DataTable",
|
||||
"type": "snippetListing",
|
||||
"title": "DataTable",
|
||||
"attributes": {
|
||||
"text": "Renders a table with rows dynamically created from an array of primitives.\n\n- Render a `<table>` element with two columns (`ID` and `Value`).\n- Use `Array.prototype.map` to render every item in `data` as a `<tr>` element, consisting of its index and value, give it a `key` produced from the concatenation of the two.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"array",
|
||||
"beginner"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "1ad27574cfe29f8cce5410e7dd243d66edeea801037e3cd0ed1d24ecdbd5526e"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "FileDrop",
|
||||
"type": "snippetListing",
|
||||
"title": "FileDrop",
|
||||
"attributes": {
|
||||
"text": "Renders a file drag and drop component for a single file.\n\n- Create a ref called `dropRef` for this component.\n- Use the `React.useState()` hook to create the `drag` and `filename` variables, initialized to `false` and `''` respectively.\n The variables `dragCounter` and `drag` are used to determine if a file is being dragged, while `filename` is used to store the dropped file's name.\n- Create the `handleDrag`, `handleDragIn`, `handleDragOut` and `handleDrop` methods to handle drag and drop functionality, bind them to the component's context.\n- Each of the methods will handle a specific event, the listeners for which are created and removed in the `React.useEffect()` hook and its attached `cleanup()` method.\n- `handleDrag` prevents the browser from opening the dragged file, `handleDragIn` and `handleDragOut` handle the dragged file entering and exiting the component, while `handleDrop` handles the file being dropped and passes it to `props.handleDrop`.\n- Return an appropriately styled `<div>` and use `drag` and `filename` to determine its contents and style.\n- Finally, bind the `ref` of the created `<div>` to `dropRef`.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"input",
|
||||
"state",
|
||||
"effect",
|
||||
"event",
|
||||
"intermediate"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "083b5e03f65112796bebc1fb5b8db99c7cd7ff16a11cca192ad18ea5db5c7e30"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "LimitedTextarea",
|
||||
"type": "snippetListing",
|
||||
"title": "LimitedTextarea",
|
||||
"attributes": {
|
||||
"text": "Renders a textarea component with a character limit.\n\n- Use the `React.useState()` hook to create the `content` state variable and set its value to `value`.\n Create a method `setFormattedContent`, which trims the content of the input if it's longer than `limit`.\n- Use the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.\n- Use a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of `event.target.value`.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"state",
|
||||
"effect",
|
||||
"event",
|
||||
"beginner"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "b4b4fbf568331843e4734aa58831dd0c94afc5aeb7d987c8afcf9e9b24f0aeea"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "LimitedWordTextarea",
|
||||
"type": "snippetListing",
|
||||
"title": "LimitedWordTextarea",
|
||||
"attributes": {
|
||||
"text": "Renders a textarea component with a word limit.\n\n- Use the `React.useState()` hook to create the `content` and `wordCount` state variables and set their values to `value` and `0` respectively.\n- Create a method `setFormattedContent`, which uses `String.prototype.split(' ')` to turn the input into an array of words and check if the result of applying `Array.prototype.filter(Boolean)` has a `length` longer than `limit`.\n- If the afforementioned `length` exceeds the `limit`, trim the input, otherwise return the raw input, updating `content` and `wordCount` accordingly in both cases.\n- Use the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.\n- Use a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of `event.target.value`.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"input",
|
||||
"state",
|
||||
"effect",
|
||||
"event",
|
||||
"beginner"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "ac22f33a0084fb444ce9e3cd7aebec507d6d785d1bc6e0a9cc5656f5ee0cb92f"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "Loader",
|
||||
"type": "snippetListing",
|
||||
"title": "Loader",
|
||||
"attributes": {
|
||||
"text": "Creates a spinning loader component.\n\n- Define appropriate CSS styles and animations for the component's elements.\n- Define the component, which returns a simple SVG, whose size is determined by the `size` prop.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"beginner"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "c64381d332ae68b271f644add7cdc15c6027c7ee6945c3d1f507bd7eeebf253d"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "Mailto",
|
||||
"type": "snippetListing",
|
||||
"title": "Mailto",
|
||||
"attributes": {
|
||||
"text": "Renders a link formatted to send an email.\n\n- Destructure the component's props, use `email`, `subject` and `body` to create a `<a>` element with an appropriate `href` attribute.\n- Render the link with `props.children` as its content.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"beginner"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "f4186bc638098d4d510a26dac586a5196ffb2e0d41e3325a0e53756f26896c4c"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "MappedTable",
|
||||
"type": "snippetListing",
|
||||
"title": "MappedTable",
|
||||
"attributes": {
|
||||
"text": "Renders a table with rows dynamically created from an array of objects and a list of property names.\n\n- Use `Object.keys()`, `Array.prototype.filter()`, `Array.prototype.includes()` and `Array.prototype.reduce()` to produce a `filteredData` array, containing all objects with the keys specified in `propertyNames`.\n- Render a `<table>` element with a set of columns equal to the amount of values in `propertyNames`.\n- Use `Array.prototype.map` to render each value in the `propertyNames` array as a `<th>` element.\n- Use `Array.prototype.map` to render each object in the `filteredData` array as a `<tr>` element, containing a `<td>` for each key in the object.\n\n_This component does not work with nested objects and will break if there are nested objects inside any of the properties specified in `propertyNames`_\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"array",
|
||||
"object",
|
||||
"intermediate"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "fce03ceb446e80f63f4b1423c70dc854f4dbf38bb54a68302c2e09d9a2c8d402"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "Modal",
|
||||
"type": "snippetListing",
|
||||
"title": "Modal",
|
||||
"attributes": {
|
||||
"text": "Renders a Modal component, controllable through events.\nTo use the component, import `Modal` only once and then display it by passing a boolean value to the `isVisible` attribute.\n\n- Use object destructuring to set defaults for certain attributes of the modal component.\n- Define `keydownHandler`, a method which handles all keyboard events, which can be used according to your needs to dispatch actions (e.g. close the modal when <kbd>Esc</kbd> is pressed).\n- Use `React.useEffect()` hook to add or remove the `keydown` event listener, which calls `keydownHandler`.\n- Use the `isVisible` prop to determine if the modal should be shown or not.\n- Use CSS to style and position the modal component.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"effect",
|
||||
"intermediate"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "bbe8b37ec2d9ee322d89b28d0ac290efd7f5b1e501cad63bbf0674cbea9e2abc"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "MultiselectCheckbox",
|
||||
"type": "snippetListing",
|
||||
"title": "MultiselectCheckbox",
|
||||
"attributes": {
|
||||
"text": "Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component.\n\n- Use `React.setState()` to create a `data` state variable and set its initial value equal to the `options` prop.\n- Create a function `toggle` that is used to toggle the `checked` to update the `data` state variable and call the `onChange` callback passed via the component's props.\n- Render a `<ul>` element and use `Array.prototype.map()` to map the `data` state variable to individual `<li>` elements with `<input>` elements as their children.\n- Each `<input>` element has the `type='checkbox'` attribute and is marked as `readOnly`, as its click events are handled by the parent `<li>` element's `onClick` handler.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"input",
|
||||
"state",
|
||||
"array",
|
||||
"intermediate"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "723cc4aeb42bc0234045688334e01ec89b66782a54862d2b2236ae12e1f87881"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "PasswordRevealer",
|
||||
"type": "snippetListing",
|
||||
"title": "PasswordRevealer",
|
||||
"attributes": {
|
||||
"text": "Renders a password input field with a reveal button.\n\n- Use the `React.useState()` hook to create the `shown` state variable and set its value to `false`.\n- Use a`<div>` to wrap both the`<input>` and the `<button>` element that toggles the type of the input field between `\"text\"` and `\"password\"`.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"input",
|
||||
"state",
|
||||
"beginner"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "b9d1d5a6b61d2ab8e73943da1dcf86bfa872821c9584715a2cee303a052334ea"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "RippleButton",
|
||||
"type": "snippetListing",
|
||||
"title": "RippleButton",
|
||||
"attributes": {
|
||||
"text": "Renders a button that animates a ripple effect when clicked.\n\n- Define some appropriate CSS styles and an animation for the ripple effect.\n- Use the `React.useState()` hook to create appropriate variables and setters for the pointer's coordinates and for the animation state of the button.\n- Use the `React.useEffect()` hook to change the state every time the `coords` state variable changes, starting the animation.\n- Use `setTimeout()` in the previous hook to clear the animation after it's done playing.\n- Use the `React.useEffect()` hook a second time to reset `coords` whenever the `isRippling` state variable is `false.`\n- Handle the `onClick` event by updating the `coords` state variable and calling the passed callback.\n- Finally, render a `<button>` with one or two `<span>` elements, setting the position of the `.ripple` element based on the `coords` state variable.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"state",
|
||||
"effect",
|
||||
"intermediate"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "a2238ea3abedb5a38d836a57966006cc43f905b375836d138bd69671a8731d84"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "Select",
|
||||
"type": "snippetListing",
|
||||
"title": "Select",
|
||||
"attributes": {
|
||||
"text": "Renders a `<select>` element that uses a callback function to pass its value to the parent component.\n\n- Use object destructuring to set defaults for certain attributes of the `<select>` element.\n- Render a `<select>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.\n- Use destructuring on the `values` array to pass an array of `value` and `text` elements and the `selected` attribute to define the initial `value` of the `<select>` element.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"input",
|
||||
"beginner"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "82ec17f203f168e42206f2a56a5954e01fd639599f26cc1c8bafb77fb5b5fb5b"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "Slider",
|
||||
"type": "snippetListing",
|
||||
"title": "Slider",
|
||||
"attributes": {
|
||||
"text": "Renders a slider element that uses a callback function to pass its value to the parent component.\n\n- Use object destructuring to set defaults for certain attributes of the `<input>` element.\n- Render an `<input>` element of type `\"range\"` and the appropriate attributes, use the `callback` function in the `onChange` event to pass the value of the input to the parent.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"input",
|
||||
"beginner"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "bf2bc45d4c4781f54cee33599c17b35bd4ce6a90e70dd5305401e2b4bafa21bf"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "StarRating",
|
||||
"type": "snippetListing",
|
||||
"title": "StarRating",
|
||||
"attributes": {
|
||||
"text": "Renders a star rating component.\n\n- Define a component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's state.\n- In the `StarRating` component, use the `React.useState()` hook to define the `rating` and `selection` state variables with the initial values of `props.rating` (or `0` if invalid or not supplied) and `0`.\n- Create a method, `hoverOver`, that updates `selected` and `rating` according to the provided `event`.\n- Create a `<div>` to wrap the `<Star>` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `selection` to `0`, the `onClick` event to set the `rating` and the `onMouseOver` event to set `selection` to the `star-id` attribute of the `event.target` respectively.\n- Finally, pass the appropriate values to each `<Star>` component (`starId` and `marked`).\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"children",
|
||||
"input",
|
||||
"state",
|
||||
"intermediate"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "1925a397f77ea80ee9dc9d82acee6dc279a3e82abac815b32109ce930de20a1f"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "Tabs",
|
||||
"type": "snippetListing",
|
||||
"title": "Tabs",
|
||||
"attributes": {
|
||||
"text": "Renders a tabbed menu and view component.\n\n- Define a `TabItem` component, pass it to the `Tab` and remove unnecessary nodes expect for `TabItem` by identifying the function's name in `props.children`.\n- Use the `React.useState()` hook to initialize the value of the `bindIndex` state variable to `props.defaultIndex`.\n- Use `Array.prototype.map` on the collected nodes to render the `tab-menu` and `tab-view`.\n- Define `changeTab`, which will be executed when clicking a `<button>` from the `tab-menu`.\n- `changeTab` executes the passed callback, `onTabClick` and updates `bindIndex`, which in turn causes a re-render, evaluating the `style` and `className` of the `tab-view` items and `tab-menu` buttons according to their `index`.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"state",
|
||||
"children",
|
||||
"intermediate"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "9f8634ca4a5f49134cb88e00c0f193c6c6c5cf8ee60482a16782c04f48595176"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "TagInput",
|
||||
"type": "snippetListing",
|
||||
"title": "TagInput",
|
||||
"attributes": {
|
||||
"text": "Renders a tag input field.\n\n- Define a `TagInput` component and use `React.useState()` hook to initialize an array with tags passed as `props`.\n- Use `Array.prototype.map()` on collected nodes to render the list of tags.\n- Define the `addTags` method, which will be executed on pressing the `Enter` key.\n- The `addTags` method uses the `setTags` method to add the new tag using the spread (`...`) operator to prepend the existing tags and adds the new tag at the end of the `tags` array.\n- Define the `removeTags` method, which will be executed on clicking the delete icon in the tag.\n- Use `Array.prototype.filter()` in `removeTags` method to remove the tag using the `index` of the tag to filter it out from `tags` array.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"input",
|
||||
"state",
|
||||
"intermediate"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "495a9ac0a38fd1cf16c5873d4533c1084f35cbd2a61c8c3b123e14e85c50c764"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "TextArea",
|
||||
"type": "snippetListing",
|
||||
"title": "TextArea",
|
||||
"attributes": {
|
||||
"text": "Renders a `<textarea>` element that uses a callback function to pass its value to the parent component.\n\n- Use object destructuring to set defaults for certain attributes of the `<textarea>` element.\n- Render a `<textarea>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"input",
|
||||
"beginner"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "a6ed5da811b5f42c139e0d0d868a0b49881203467ffcb464b707a0d9bbe7660f"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "Ticker",
|
||||
"type": "snippetListing",
|
||||
"title": "Ticker",
|
||||
"attributes": {
|
||||
"text": "Renders a ticker component.\n\n- Use the `React.useState()` hook to initialize the `ticker` state variable to `0`.\n- Define two methods, `tick` and `reset`, that will periodically increment `timer` based on `interval` and reset `interval` respectively.\n- Return a `<div>` with two `<button>` elements, each of which calls `tick` and `reset` respectively.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"state",
|
||||
"beginner"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "eb29bbedf8f0aed903abf2b12ce90b5d02a8b3fdae15b4c8810b5841aeca9e4b"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "Toggle",
|
||||
"type": "snippetListing",
|
||||
"title": "Toggle",
|
||||
"attributes": {
|
||||
"text": "Renders a toggle component.\n\n- Use the `React.useState()` to initialize the `isToggleOn` state variable to `false`.\n- Use an object, `style`, to hold the styles for individual components and their states.\n- Return a `<button>` that alters the component's `isToggledOn` when its `onClick` event is fired and determine the appearance of the content based on `isToggleOn`, applying the appropriate CSS rules from the `style` object.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"state",
|
||||
"beginner"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "9a7a1630d12ccf86f0712a7ca7444698933f3f3d946957ef1b6202637c44d531"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "Tooltip",
|
||||
"type": "snippetListing",
|
||||
"title": "Tooltip",
|
||||
"attributes": {
|
||||
"text": "Renders a tooltip component.\n\n- Use the `React.useState()` hook to create the `show` variable and initialize it to `false`.\n- Return a `<div>` element that contains the `<div>` that will be the tooltip and the `children` passed to the component.\n- Handle the `onMouseEnter` and `onMouseLeave` methods, by altering the value of the `show` variable.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"state",
|
||||
"children",
|
||||
"beginner"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "1d29be55adf50919e115f5fa83d7446bd11688f4d3a50c19bf357675cd7fdfd4"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "TreeView",
|
||||
"type": "snippetListing",
|
||||
"title": "TreeView",
|
||||
"attributes": {
|
||||
"text": "Renders a tree view of a JSON object or array with collapsible content.\n\n- Use object destructuring to set defaults for certain props.\n- Use the value of the `toggled` prop to determine the initial state of the content (collapsed/expanded).\n- Use the `React.setState()` hook to create the `isToggled` state variable and give it the value of the `toggled` prop initially.\n- Return a `<div>` to wrap the contents of the component and the `<span>` element, used to alter the component's `isToggled` state.\n- Determine the appearance of the component, based on `isParentToggled`, `isToggled`, `name` and `Array.isArray()` on `data`.\n- For each child in `data`, determine if it is an object or array and recursively render a sub-tree.\n- Otherwise, render a `<p>` element with the appropriate style.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"object",
|
||||
"state",
|
||||
"recursion",
|
||||
"advanced"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "63922e84d527dc7783025495ebab1df55452b595d0a5e54981d8ea891e055736"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "UncontrolledInput",
|
||||
"type": "snippetListing",
|
||||
"title": "UncontrolledInput",
|
||||
"attributes": {
|
||||
"text": "Renders an `<input>` element that uses a callback function to pass its value to the parent component.\n\n- Use object destructuring to set defaults for certain attributes of the `<input>` element.\n- Render an `<input>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the input to the parent.\n\n",
|
||||
"tags": [
|
||||
"components",
|
||||
"input",
|
||||
"beginner"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "11581e3b40209c7152833aa421c7d18c889b16067c5cc1557b1bb7f604f18982"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "useAsync",
|
||||
"type": "snippetListing",
|
||||
"title": "useAsync",
|
||||
"attributes": {
|
||||
"text": "A hook that handles asynchronous calls.\n\n- Create a custom hook that takes a handler function, `fn`.\n- Define a reducer function and an initial state for the custom hook's state.\n- Use the `React.useReducer()` hook to initialize the `state` variable and the `dispatch` function.\n- Define a `run` function that will run the provided callback, `fn`, while using `dispatch` to update `state` as necessary.\n- Return an object containting the the properties of `state` (`value`, `error` and `loading`) and the `run` function.\n\n",
|
||||
"tags": [
|
||||
"hooks",
|
||||
"state",
|
||||
"reducer",
|
||||
"advanced"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "e15c637ad5256365c049fdef4529955310e2e71fec1d7d76bf9818a2db789b5c"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "useClickInside",
|
||||
"type": "snippetListing",
|
||||
"title": "useClickInside",
|
||||
"attributes": {
|
||||
"text": "A hook that handles the event of clicking inside the wrapped component.\n\n- Create a custom hook that takes a `ref` and a `callback` to handle the `click` event.\n- Use the `React.useEffect()` hook to append and clean up the `click` event.\n- Use the `React.useRef()` hook to create a `ref` for your click component and pass it to the `useClickInside` hook.\n\n",
|
||||
"tags": [
|
||||
"hooks",
|
||||
"effect",
|
||||
"event",
|
||||
"intermediate"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "1be6623c673a30671e534ac363e5acffdedc8d890fad5f73a7cafc7c7402bb75"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "useClickOutside",
|
||||
"type": "snippetListing",
|
||||
"title": "useClickOutside",
|
||||
"attributes": {
|
||||
"text": "A hook that handles the event of clicking outside of the wrapped component.\n\n- Create a custom hook that takes a `ref` and a `callback` to handle the `click` event.\n- Use the `React.useEffect()` hook to append and clean up the `click` event.\n- Use the `React.useRef()` hook to create a `ref` for your click component and pass it to the `useClickOutside` hook.\n\n",
|
||||
"tags": [
|
||||
"hooks",
|
||||
"effect",
|
||||
"event",
|
||||
"intermediate"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "e565a610582386df7a41cbcfcd2d2ad7df11651adceafdd9e4840ca2b756af21"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "useComponentDidMount",
|
||||
"type": "snippetListing",
|
||||
"title": "useComponentDidMount",
|
||||
"attributes": {
|
||||
"text": "A hook that executes a callback immediately after a component is mounted.\n\n- Use `React.useEffect()` with an empty array as the second argument to execute the provided callback only once when the component is mounted.\n\n",
|
||||
"tags": [
|
||||
"hooks",
|
||||
"effect",
|
||||
"beginner"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "82ef558fad661a522f5e897014b3898ad56ab6603a342c477f09edaa6281a0c9"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "useComponentWillUnmount",
|
||||
"type": "snippetListing",
|
||||
"title": "useComponentWillUnmount",
|
||||
"attributes": {
|
||||
"text": "A hook that executes a callback immediately before a component is unmounted and destroyed.\n\n- Use `React.useEffect()` with an empty array as the second argument and return the provided callback to be executed only once before cleanup.\n\n",
|
||||
"tags": [
|
||||
"hooks",
|
||||
"effect",
|
||||
"beginner"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "dd2769c603f226996de8baf90af511fc788543dcb194a3b600f83fd2916699a6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "useFetch",
|
||||
"type": "snippetListing",
|
||||
"title": "useFetch",
|
||||
"attributes": {
|
||||
"text": "A hook that implements `fetch` in a declarative manner.\n\n- Create a custom hook that takes a `url` and `options`.\n- Use the `React.useState()` hook to initialize the `response` and `error` state variables.\n- Use the `React.useEffect()` hook to anychronously call `fetch()` and update the state varaibles accordingly.\n- Return an object containting the `response` and `error` state variables.\n\n",
|
||||
"tags": [
|
||||
"hooks",
|
||||
"effect",
|
||||
"state",
|
||||
"intermediate"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "8f60c1ae5da89480ce55a4bc15e4ba63aaa3702de9be123e017cd2616e1b4751"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "useInterval",
|
||||
"type": "snippetListing",
|
||||
"title": "useInterval",
|
||||
"attributes": {
|
||||
"text": "A hook that implements `setInterval` in a declarative manner.\n\n- Create a custom hook that takes a `callback` and a `delay`.\n- Use the `React.useRef()` hook to create a `ref` for the callback function.\n- Use the `React.useEffect()` hook to remember the latest callback.\n- Use the `React.useEffect()` hook to set up the interval and clean up.\n\n",
|
||||
"tags": [
|
||||
"hooks",
|
||||
"effect",
|
||||
"intermediate"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "2146f00ffd55bd78f63e0543922b73cdc339acf728067bf96f20c05eca5306ab"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "useMediaQuery",
|
||||
"type": "snippetListing",
|
||||
"title": "useMediaQuery",
|
||||
"attributes": {
|
||||
"text": "A hook that returns a value based on a media query.\n\n- Check if `window` and `window.matchMedia` exist, return `whenFalse` if not.\n- Use `window.matchMedia()` to match the given `query`, cast its `matches` property to a boolean and store in a state variable, `match`, using `React.useState()`.\n- Use `React.useEffect()` to add a listener for changes and to clean up the listeners after the hook is destroyed.\n- Return either `whenTrue` or `whenFalse` based on the value of `match`.\n\n",
|
||||
"tags": [
|
||||
"hooks",
|
||||
"state",
|
||||
"effect",
|
||||
"intermediate"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "e1df67f6c744bdc52d523b50beb91ddc2ecb5469741f27140596a3b8e2dcfe18"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "useNavigatorOnLine",
|
||||
"type": "snippetListing",
|
||||
"title": "useNavigatorOnLine",
|
||||
"attributes": {
|
||||
"text": "A hook that returns if the client is online or offline.\n\n- Create a function, `getOnLineStatus`, that uses the `NavigatorOnLine` web API to get the online status of the client.\n- Use the `React.useState()` hook to create an appropriate state variable, `status`, and setter.\n- Use the `React.useEffect()` hook to add listeners for appropriate events, updating state, and cleanup those listeners when unmounting.\n- Finally return the `status` state variable.\n\n",
|
||||
"tags": [
|
||||
"hooks",
|
||||
"state",
|
||||
"effect",
|
||||
"intermediate"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "c9a0c97f92439438fd49c5ef50742524aae8a162e144342956bcf92cf1ebf470"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "usePrevious",
|
||||
"type": "snippetListing",
|
||||
"title": "usePrevious",
|
||||
"attributes": {
|
||||
"text": "A hook that stores the previous state or props.\n\n- Create a custom hook that takes a `value`.\n- Use the `React.useRef()` hook to create a `ref` for the `value`.\n- Use the `React.useEffect()` hook to remember the latest `value`.\n\n",
|
||||
"tags": [
|
||||
"hooks",
|
||||
"state",
|
||||
"effect",
|
||||
"intermediate"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "df9f5b8fd3c06d02bfedcaa55d0b86a2b93b0d4c027726e056aefc1940a3c63b"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "useSSR",
|
||||
"type": "snippetListing",
|
||||
"title": "useSSR",
|
||||
"attributes": {
|
||||
"text": "A hook that checks if the code is running on the browser or the server.\n\n- Create a custom hook that returns an appropriate object.\n- Use `typeof window`, `window.document` and `window.document.createElement` to check if the code is running on the browser.\n- Use the `React.useState()` hook to define the `inBrowser` state variable.\n- Use the `React.useEffect()` hook to update the `inBrowser` state variable and clean up at the end.\n- Use the `React.useMemo()` to memoize the return values of the custom hook.\n\n",
|
||||
"tags": [
|
||||
"hooks",
|
||||
"effect",
|
||||
"state",
|
||||
"memo",
|
||||
"intermediate"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "e55822c285e99c1aded28e5c8910080c5a0bb9878931d97c6dbc4d5d24ec9fe7"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "useTimeout",
|
||||
"type": "snippetListing",
|
||||
"title": "useTimeout",
|
||||
"attributes": {
|
||||
"text": "A hook that implements `setTimeout` in a declarative manner.\n\n- Create a custom hook that takes a `callback` and a `delay`.\n- Use the `React.useRef()` hook to create a `ref` for the callback function.\n- Use the `React.useEffect()` hook to remember the latest callback.\n- Use the `React.useEffect()` hook to set up the timeout and clean up.\n\n",
|
||||
"tags": [
|
||||
"hooks",
|
||||
"effect",
|
||||
"intermediate"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "83e13b09dccd6fa310703dfa7cc61e446fc10f1757125f2a6ad86833a4772c82"
|
||||
}
|
||||
}
|
||||
],
|
||||
"meta": {
|
||||
"specification": "http://jsonapi.org/format/",
|
||||
"type": "snippetListingArray",
|
||||
"language": {
|
||||
"short": "jsx",
|
||||
"long": "React"
|
||||
},
|
||||
"otherLanguages": [
|
||||
{
|
||||
"short": "css",
|
||||
"long": "CSS"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -939,6 +939,34 @@
|
||||
"authorCount": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "useCopyToClipboard",
|
||||
"title": "useCopyToClipboard",
|
||||
"type": "snippet",
|
||||
"attributes": {
|
||||
"fileName": "useCopyToClipboard.md",
|
||||
"text": "A hook that copies the given text to the clipboard.\n\n- Use the [copyToClipboard](/js/s/copy-to-clipboard/) snippet to copy the text to clipboard.\n- Use the `React.useState()` hook to initialize the `copied` variable.\n- Use the `React.useCallback()` hook to create a callback for the `copyToClipboard` method.\n- Use the `React.useEffect()` hook to reset the `copied` state variable if the `text` changes.\n- Return the `copied` state variable and the `copy` callback.\n\n",
|
||||
"codeBlocks": {
|
||||
"style": "",
|
||||
"code": "const useCopyToClipboard = (text) => {\n const copyToClipboard = (str) => {\n const el = document.createElement('textarea');\n el.value = str;\n el.setAttribute('readonly', '');\n el.style.position = 'absolute';\n el.style.left = '-9999px';\n document.body.appendChild(el);\n const selected =\n document.getSelection().rangeCount > 0\n ? document.getSelection().getRangeAt(0)\n : false;\n el.select();\n const success = document.execCommand('copy');\n document.body.removeChild(el);\n if (selected) {\n document.getSelection().removeAllRanges();\n document.getSelection().addRange(selected);\n }\n return success;\n };\n\n const [copied, setCopied] = React.useState(false);\n\n const copy = React.useCallback(() => {\n if (!copied) setCopied(copyToClipboard(text));\n }, [text]);\n React.useEffect(() => () => setCopied(false), [text]);\n\n return [copied, copy];\n};",
|
||||
"example": "const TextCopy = (props) => {\n const [copied, copy] = useCopyToClipboard('Lorem ipsum');\n return (\n <div>\n <button onClick={copy}>Click to copy</button>\n <span>{copied && 'Copied!'}</span>\n </div>\n );\n};\n\nReactDOM.render(<TextCopy />, document.getElementById('root'));"
|
||||
},
|
||||
"tags": [
|
||||
"hooks",
|
||||
"effect",
|
||||
"state",
|
||||
"callback",
|
||||
"advanced"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "bb4dcf04e4cc446ba6c5d6528c8676deb0742ee5f72d6b548edc2d35d14b3967",
|
||||
"firstSeen": "",
|
||||
"lastUpdated": "",
|
||||
"updateCount": 1,
|
||||
"authorCount": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "useFetch",
|
||||
"title": "useFetch",
|
||||
|
||||
Reference in New Issue
Block a user