{"_id":"@amongotham/react","_rev":"1-80c75d88de2e46eaa4695f86f5e8e2bd","name":"@amongotham/react","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@amongotham/react","version":"1.0.0","react-native":"src/index.ts","main":"dist/index.js","scripts":{"clean":"rimraf dist && rimraf es6","build:cjs":"tsc","build":"yarn clean && yarn build:cjs","test":"jest test --env=jsdom","prettify-mac":"npx prettier --write 'src/**/*.{ts,js}'","prettify-win":"npx prettier --write src/**/*.{ts,js}"},"license":"MIT","peerDependencies":{"react":"*"},"devDependencies":{"@testing-library/react-hooks":"^7.0.1","@types/jest":"^26.0.23","@types/react":"^17.0.5","jest":"^27.0.6","ts-jest":"^27.0.3","typescript":"^4.2.4"},"gitHead":"fc10de1967a0d0daa31e4747be8868c3b979bd78","description":"1. useModal","_id":"@amongotham/react@1.0.0","_nodeVersion":"14.15.3","_npmVersion":"6.14.9","dist":{"integrity":"sha512-YpUAcLy9SkB+PyfbQiwPLpQ9xTFisLPeaQJXWT2u6njhqgpv0kowOBfOBom1pvVxx5jT75giZwc8iGxAdfrKTw==","shasum":"12ceeba7cbb8e4e0d7b4092b5af5d867c69ec881","tarball":"https://registry.npmjs.org/@amongotham/react/-/react-1.0.0.tgz","fileCount":28,"unpackedSize":24405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhp6tKCRA9TVsSAnZWagAAdqMP/iEMPjrtLKS3J9iKk1vB\nAsoO3zDa1IPY5W7ZdbKAbCRxZJ6qXQjqeTTH/Uv9mTSc0eqIm+yENYGWlYT4\n3LERzrexwntK7dYqTZNpecEKOLd3bGP8FDcrSqyWP6udFb8g5uneVupkVi2f\nsCpZZWxhbK51GB5iSFkDD0+nxuDvZ0hkobBXAfnQZ0698fvBJ6T0nN9p1kuZ\nHL5wRC9QsrlL+nJ+Kh8YKoAVVXuku8KTSwvxEu86wejLNMksQolWkzsQkzkJ\neJONuIkXRnYYjGtm5bVyB47scE3b1ON5eiiV4zmOkU23E1DMVpBxrEjEdY8v\nZOSCr5BxUXq7Z4r6f///B0ahqFONZgLJ+FF/EMERKHxT0R1MGqWCmG2P/H2G\nm/Udqv2mJixeO97/ht2jn9F09KgSd994b+nQoH3HOKbZPXXWS5bJsSmLId7u\nkzyMUo1vxDT1UUDm4lRKmMe+grNiMntlBXHH4ptsSX6pm0IkmyURQ+aWQXZl\nHY9jGG3n9EAwPtt+aZ2L0EhiP7Ys2kETuEFxbMbnGp0Ryj3nrXJTrPlbWjwC\nbNLPVrtxeIyZEvjO3WW2zR5F7Ysp0zPC88/Ryyy9JaiXkKxr3Ls+qzR7tdLo\nkfI1/eIzYHKO6Jmp6IJvegUDyqe3SOojAd+otHRxrNkcyYsJBTwUdYFxlYZc\nv0Sr\r\n=6V2A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjX9UhHSzAe1KuXc84GOtQAMpnRMnisUzAAFTOTcpI5QIhAOphg/NWsYY5T2g6EKbtwrj5sokw5SDYCyF3Ep43Umph"}]},"_npmUser":{"name":"amongotham","email":"decrypt.aman@gmail.com"},"directories":{},"maintainers":[{"name":"amongotham","email":"decrypt.aman@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_1.0.0_1638378314242_0.8073412840666274"},"_hasShrinkwrap":false}},"time":{"created":"2021-12-01T17:05:14.186Z","1.0.0":"2021-12-01T17:05:14.391Z","modified":"2022-04-04T13:50:40.375Z"},"maintainers":[{"name":"amongotham","email":"decrypt.aman@gmail.com"}],"description":"1. useModal","license":"MIT","readme":"# resto-react\r\n\r\n## COMPONENTS\r\n\r\n1. useModal\r\n\r\n- The concept of this component is to render a _modal-like_ components both in Native, Web and other _React_ platforms and prevents unnecessary re-renders accross the app.\r\n\r\nUSAGE\r\n\r\n```\r\nimport { ModalProvider, useModal } from \"@resto-react\";\r\n\r\nfunction EntryPoint() {\r\n return (\r\n \r\n \r\n \r\n )\r\n}\r\n\r\nfunction ProductLists() {\r\n const toastMessage = useModal(MyOwnCustomToastMessage);\r\n const [products, setProducts] = React.useState(null);\r\n\r\n React.useEffect(() => {\r\n (async function fetchApi() {\r\n try {\r\n const data = await getProducts();\r\n setProducts(data)\r\n } catch (err) {\r\n /**\r\n * here by the showing the toastMessage,\r\n * we render the *MyOwnCustomToastMessage* only in the React tree.\r\n * This prevents re-renders in this component because conceptually\r\n * only the MyCustomToastMessage should be rendered.\r\n */\r\n toastMessage.show({ message: \"Problem fetching Products\" })\r\n }\r\n })()\r\n }, []);\r\n\r\n if (!products) return \r\n\r\n return ...\r\n}\r\n\r\nfunction MyOwnCustomToastMessage(props) {\r\n /* here the modal itself pass hide prop implicitly to hide the component.*/\r\n const { hide } = props;\r\n\r\n React.useEffect(() => {\r\n // perform animation so that it feels like a toast\r\n }, []);\r\n\r\n function onClose() {\r\n // perform closing animation\r\n closingAnimationFn();\r\n hide(); // hide provided by the modal removes the component from the React tree.\r\n }\r\n}\r\n```\r\n\r\n---\r\n\r\nPLEASE NOTE\r\n\r\n`useModal` doesn't care much about how one might render the component style-wise.\r\nIt only cares about mounting and unmounting the component from the React tree.\r\n\r\n2. useToggle\r\n\r\n- A hook used to toggle a boolean, useful for state that require toggle like\r\n switch, accordian, dropdown etc\r\n\r\nUsuage\r\n\r\n```\r\nconst [on, toggle, setTrue, setFalse] = useToggle();\r\n```\r\n\r\n3. useSorter\r\n\r\n- A hook used to sort the items\r\n\r\nUsuage\r\n\r\n```\r\nimport {\r\n useSorter,\r\n descendingStringComparator,\r\n ascendingStringComparator,\r\n ascendingNumberComparator,\r\n descendingNumberComparator,\r\n} from '@resto/react';\r\n\r\nconst items = [\r\n { id: 4, name: \"Z\", price: 90 },\r\n { id: 1, name: \"A\", price: 120 },\r\n { id: 2, name: \"B\", price: 20 },\r\n]\r\n\r\n\r\n// let's define the sortStates outside the scope of component\r\n// you could create your own custom comparator\r\nconst defaultSortStates = [\r\n {\r\n sortKey: 'price',\r\n ascComparator: ascendingNumberComparator,\r\n descComparator: descendingNumberComparator,\r\n sortOrder: null, // null, if the items are not supposed to be sorted at the initial mount\r\n },\r\n {\r\n sortKey: 'name',\r\n ascComparator: ascendingStringComparator,\r\n descComparator: descendingStringComparator,\r\n sortOrder: 'asc',\r\n },\r\n];\r\n\r\nfunction MyComponent() {\r\n const [getSortByKey, updateSortByKey, sortedItems] = useSorter(items, defaultSortStates);\r\n\r\n return (\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n
\r\n {sortedItems.map(item =>
{item.name}
)}\r\n
\r\n
\r\n )\r\n}\r\n\r\n```\r\n\r\n---\r\n\r\nPLEASE NOTE:\r\nYou could create your own `comparators` and pass it on as the defaultSortStates\r\n\r\n#### CONSIDERATIONS\r\n\r\n1. Formatting\r\n\r\nFormatting in 2021, is a least thing one should worry about.\r\nTo make it easy and consistent across project. Please install\r\n\r\n```\r\nprettier\r\n```\r\n\r\nin your IDE ( be it Vscode, Webstorm or Atom).\r\n\r\nEnable `prettier` so that it formats automatically in default.\r\n","readmeFilename":"README.md"}