{"_id":"@antivixen/react-if-else","_rev":"4-664d0ce38afcf9063d1ae69cca6891bd","name":"@antivixen/react-if-else","dist-tags":{"latest":"0.0.6"},"versions":{"0.0.2":{"name":"@antivixen/react-if-else","version":"0.0.2","description":"React JS library for the conditional rendering","main":"./dist/index.umd.js","module":"./dist/index.es.js","exports":{".":{"import":"./dist/index.es.js","require":"./dist/index.umd.js"}},"types":"./dist/index.d.ts","private":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/antivixen/react-if-else.git"},"keywords":["react","if else","conditional rendering","JSX"],"author":{"name":"antivixen"},"license":"MIT","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"eslintConfig":{"env":{"browser":true,"es2020":true},"extends":["eslint:recommended","plugin:react/recommended"],"parserOptions":{"sourceType":"module"}},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"devDependencies":{"@changesets/cli":"^2.26.1","@testing-library/jest-dom":"^6.0.1","@testing-library/react":"^14.0.0","@types/react":"^18.2.20","@types/react-dom":"^18.2.7","@vitejs/plugin-react":"^4.0.4","eslint":"^8.47.0","eslint-plugin-react":"^7.33.2","jsdom":"^22.1.0","react":"^18.2.0","react-dom":"^18.2.0","typescript":"^5.1.3","vite":"^4.4.9","vite-plugin-dts":"^3.5.2","vite-tsconfig-paths":"^4.2.0","vitest":"^0.32.0"},"scripts":{"dev":"vite","lint":"eslint .","test":"vitest run","build":"tsc && vite build","ci":"pnpm run lint && pnpm run test && pnpm run build","release":"pnpm run lint && pnpm run test && pnpm run build && changeset publish"},"bugs":{"url":"https://github.com/antivixen/react-if-else/issues"},"homepage":"https://github.com/antivixen/react-if-else#readme","_id":"@antivixen/react-if-else@0.0.2","_integrity":"sha512-sWESn8Y9t5bE7r/lSghqgqDVMLezJA9Lrj1SRCv4Hf4yESPT+srIOjaWyXm+YqbW2keKDKdP+X9aeYDAQpHQhg==","_resolved":"/tmp/09fdf0967fec54fb9887eb6ea089b079/antivixen-react-if-else-0.0.2.tgz","_from":"file:antivixen-react-if-else-0.0.2.tgz","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-sWESn8Y9t5bE7r/lSghqgqDVMLezJA9Lrj1SRCv4Hf4yESPT+srIOjaWyXm+YqbW2keKDKdP+X9aeYDAQpHQhg==","shasum":"e0411be01af4d6f489ec943e67d4590113e32c76","tarball":"https://registry.npmjs.org/@antivixen/react-if-else/-/react-if-else-0.0.2.tgz","fileCount":7,"unpackedSize":60382,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBo+yMvsLSDXjgJALc/Fy69eaOdub3WOLavHtBwEjKWYAiAYR3LZOODGMpMVt86uo3zXNvHoWLs4HTnfBfeVITyQwQ=="}]},"_npmUser":{"name":"antivixen","email":"egregor2011@gmail.com"},"directories":{},"maintainers":[{"name":"antivixen","email":"egregor2011@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-if-else_0.0.2_1693251048107_0.18541020835089372"},"_hasShrinkwrap":false},"0.0.3":{"name":"@antivixen/react-if-else","version":"0.0.3","description":"React JS library for the conditional rendering","main":"./dist/index.umd.js","module":"./dist/index.es.js","exports":{".":{"import":"./dist/index.es.js","require":"./dist/index.umd.js"}},"types":"./dist/index.d.ts","private":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/antivixen/react-if-else.git"},"keywords":["react","if else","conditional rendering","JSX"],"author":{"name":"antivixen"},"license":"MIT","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"eslintConfig":{"env":{"browser":true,"es2020":true},"extends":["eslint:recommended","plugin:react/recommended"],"parserOptions":{"sourceType":"module"}},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"devDependencies":{"@changesets/cli":"^2.26.1","@testing-library/jest-dom":"^6.0.1","@testing-library/react":"^14.0.0","@types/react":"^18.2.20","@types/react-dom":"^18.2.7","@vitejs/plugin-react":"^4.0.4","eslint":"^8.47.0","eslint-plugin-react":"^7.33.2","jsdom":"^22.1.0","react":">=18.0.0","react-dom":">=18.0.0","typescript":"^5.1.3","vite":"^4.4.9","vite-plugin-dts":"^3.5.2","vite-tsconfig-paths":"^4.2.0","vitest":"^0.32.0"},"scripts":{"dev":"vite","lint":"eslint .","test":"vitest run","build":"tsc && vite build","ci":"pnpm run lint && pnpm run test && pnpm run build","release":"pnpm run lint && pnpm run test && pnpm run build && changeset publish"},"bugs":{"url":"https://github.com/antivixen/react-if-else/issues"},"homepage":"https://github.com/antivixen/react-if-else#readme","_id":"@antivixen/react-if-else@0.0.3","_integrity":"sha512-s04ZbkPgngU2vfAXb322gZ0gbZw6oXiCzwIV1SdabBP8Gkxbu4BGVvqu5r6RXPixeZqa9YuRhcJUbj+VgBQQlQ==","_resolved":"/tmp/0c6cdbd2b01b509bd110e446b7ef7aca/antivixen-react-if-else-0.0.3.tgz","_from":"file:antivixen-react-if-else-0.0.3.tgz","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-s04ZbkPgngU2vfAXb322gZ0gbZw6oXiCzwIV1SdabBP8Gkxbu4BGVvqu5r6RXPixeZqa9YuRhcJUbj+VgBQQlQ==","shasum":"bb9dcd79f0c49982fcf850e53d61df6f3013ab53","tarball":"https://registry.npmjs.org/@antivixen/react-if-else/-/react-if-else-0.0.3.tgz","fileCount":7,"unpackedSize":60386,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/JekeEFiqLqzaRRoaz/bs4KI32Qeaw1K/+W3RFGhm7wIhAM7fk7dVEXbP4ck4yS8fyJjbw1/G84dlgrVOXu2QsMEc"}]},"_npmUser":{"name":"antivixen","email":"egregor2011@gmail.com"},"directories":{},"maintainers":[{"name":"antivixen","email":"egregor2011@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-if-else_0.0.3_1693251843309_0.07960519229721785"},"_hasShrinkwrap":false},"0.0.4":{"name":"@antivixen/react-if-else","version":"0.0.4","description":"React JS library for the conditional rendering","main":"./dist/index.umd.js","module":"./dist/index.es.js","exports":{".":{"import":"./dist/index.es.js","require":"./dist/index.umd.js"}},"types":"./dist/index.d.ts","private":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/antivixen/react-if-else.git"},"keywords":["react","if else","conditional rendering","JSX"],"author":{"name":"antivixen"},"license":"MIT","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"eslintConfig":{"env":{"browser":true,"es2020":true},"extends":["eslint:recommended","plugin:react/recommended"],"parserOptions":{"sourceType":"module"}},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"devDependencies":{"@changesets/cli":"^2.26.1","@testing-library/jest-dom":"^6.0.1","@testing-library/react":"^14.0.0","@types/react":">=18.0.0","@types/react-dom":">=18.0.0","@vitejs/plugin-react":"^4.0.4","eslint":"^8.47.0","eslint-plugin-react":"^7.33.2","jsdom":"^22.1.0","react":">=18.0.0","react-dom":">=18.0.0","typescript":"^5.1.3","vite":"^4.4.9","vite-plugin-dts":"^3.5.2","vite-tsconfig-paths":"^4.2.0","vitest":"^0.32.0"},"scripts":{"dev":"vite","lint":"eslint .","test":"vitest run","build":"tsc && vite build","ci":"pnpm run lint && pnpm run test && pnpm run build","release":"pnpm run lint && pnpm run test && pnpm run build && changeset publish"},"bugs":{"url":"https://github.com/antivixen/react-if-else/issues"},"homepage":"https://github.com/antivixen/react-if-else#readme","_id":"@antivixen/react-if-else@0.0.4","_integrity":"sha512-pFm1VmYPFq4HC1pGGfoXRwILA9tv7WxCuOaTIwvONvtlsCJsTxjdubtGkcoxZtkt9i5pcvmAiuKwae8JdYZW/g==","_resolved":"/tmp/8c911656794e8b9e25e058a8abc68faa/antivixen-react-if-else-0.0.4.tgz","_from":"file:antivixen-react-if-else-0.0.4.tgz","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-pFm1VmYPFq4HC1pGGfoXRwILA9tv7WxCuOaTIwvONvtlsCJsTxjdubtGkcoxZtkt9i5pcvmAiuKwae8JdYZW/g==","shasum":"bb3760963c7d21ea25d3d905f2cf27aaa5615849","tarball":"https://registry.npmjs.org/@antivixen/react-if-else/-/react-if-else-0.0.4.tgz","fileCount":7,"unpackedSize":60387,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGSyZI3Y3DPQ7fCAnReCjH9Vhcb004UrZn2ID55193oQIhANnHQxx3ypW4LSC2Jo9NH2eHLM98S6WOulfhS78b0mvN"}]},"_npmUser":{"name":"antivixen","email":"egregor2011@gmail.com"},"directories":{},"maintainers":[{"name":"antivixen","email":"egregor2011@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-if-else_0.0.4_1693252115742_0.09865043397866957"},"_hasShrinkwrap":false},"0.0.5":{"name":"@antivixen/react-if-else","version":"0.0.5","description":"React JS library for the conditional rendering","main":"./dist/index.umd.js","module":"./dist/index.es.js","exports":{".":{"import":"./dist/index.es.js","require":"./dist/index.umd.js"}},"types":"./dist/index.d.ts","private":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/antivixen/react-if-else.git"},"keywords":["react","if else","conditional rendering","JSX"],"author":{"name":"antivixen"},"license":"MIT","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"eslintConfig":{"env":{"browser":true,"es2020":true},"extends":["eslint:recommended","plugin:react/recommended"],"parserOptions":{"sourceType":"module"}},"devDependencies":{"@changesets/cli":"^2.26.1","@testing-library/jest-dom":"^6.0.1","@testing-library/react":"^14.0.0","@types/react":"^18.2.21","@types/react-dom":"^18.2.7","@vitejs/plugin-react":"^4.0.4","eslint":"^8.47.0","eslint-plugin-react":"^7.33.2","jsdom":"^22.1.0","react":"^18.2.0","react-dom":"^18.2.0","typescript":"^5.1.3","vite":"^4.4.9","vite-plugin-dts":"^3.5.2","vite-tsconfig-paths":"^4.2.0","vitest":"^0.32.0"},"scripts":{"dev":"vite","lint":"eslint .","test":"vitest run","build":"tsc && vite build","ci":"pnpm run lint && pnpm run test && pnpm run build","release":"pnpm run lint && pnpm run test && pnpm run build && changeset publish"},"bugs":{"url":"https://github.com/antivixen/react-if-else/issues"},"homepage":"https://github.com/antivixen/react-if-else#readme","_id":"@antivixen/react-if-else@0.0.5","_integrity":"sha512-OZmD8dr8RKblcbWD+oPNsopyQFlVgoHyRYabFyRkP85X+9yPGH/QCV2alkHXXmTgOEazDs0sfhQpHQQu6pKCxA==","_resolved":"/tmp/91ab992d878b77566460387023d02cc2/antivixen-react-if-else-0.0.5.tgz","_from":"file:antivixen-react-if-else-0.0.5.tgz","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-OZmD8dr8RKblcbWD+oPNsopyQFlVgoHyRYabFyRkP85X+9yPGH/QCV2alkHXXmTgOEazDs0sfhQpHQQu6pKCxA==","shasum":"4ad3b6f4b2e43710db709db207d62584f8d1ac8e","tarball":"https://registry.npmjs.org/@antivixen/react-if-else/-/react-if-else-0.0.5.tgz","fileCount":7,"unpackedSize":60302,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFKiP1MasOi4/QFuJvMGK7NVh0G52MTp758OOV4Clcw7AiAGs2aTzsxrzMlWBCidVXnyCgvwVv6PBY4N3nlxVv6oyg=="}]},"_npmUser":{"name":"antivixen","email":"egregor2011@gmail.com"},"directories":{},"maintainers":[{"name":"antivixen","email":"egregor2011@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-if-else_0.0.5_1693252908681_0.7755490587657776"},"_hasShrinkwrap":false},"0.0.6":{"name":"@antivixen/react-if-else","version":"0.0.6","description":"React JS library for the conditional rendering","main":"./dist/index.umd.js","module":"./dist/index.es.js","exports":{".":{"import":"./dist/index.es.js","require":"./dist/index.umd.js"}},"types":"./dist/index.d.ts","private":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/antivixen/react-if-else.git"},"keywords":["react","if else","conditional rendering","JSX"],"author":{"name":"antivixen"},"license":"MIT","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"eslintConfig":{"env":{"browser":true,"es2020":true},"extends":["eslint:recommended","plugin:react/recommended"],"parserOptions":{"sourceType":"module"}},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"@changesets/cli":"^2.26.1","@testing-library/jest-dom":"^6.0.1","@testing-library/react":"^14.0.0","@types/react":"^18.2.21","@types/react-dom":"^18.2.7","@vitejs/plugin-react":"^4.0.4","eslint":"^8.47.0","eslint-plugin-react":"^7.33.2","jsdom":"^22.1.0","react":"^18.2.0","react-dom":"^18.2.0","typescript":"^5.1.3","vite":"^4.4.9","vite-plugin-dts":"^3.5.2","vite-tsconfig-paths":"^4.2.0","vitest":"^0.32.0"},"scripts":{"dev":"vite","lint":"eslint .","test":"vitest run","build":"tsc && vite build","ci":"pnpm run lint && pnpm run test && pnpm run build","release":"pnpm run lint && pnpm run test && pnpm run build && changeset publish"},"bugs":{"url":"https://github.com/antivixen/react-if-else/issues"},"homepage":"https://github.com/antivixen/react-if-else#readme","_id":"@antivixen/react-if-else@0.0.6","_integrity":"sha512-Od8vo/f2kbe07ljMbPW5nrcddVa/RGu+YBqli9qfjG7K3HkPQ6THWO4kGXhVeBo0t/iHrGdMR32nxTK/XVAuTQ==","_resolved":"/tmp/b6a2c46b894bac257482d3988b68d281/antivixen-react-if-else-0.0.6.tgz","_from":"file:antivixen-react-if-else-0.0.6.tgz","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-Od8vo/f2kbe07ljMbPW5nrcddVa/RGu+YBqli9qfjG7K3HkPQ6THWO4kGXhVeBo0t/iHrGdMR32nxTK/XVAuTQ==","shasum":"f46cfb68add1e5947e6663953927826841715ae6","tarball":"https://registry.npmjs.org/@antivixen/react-if-else/-/react-if-else-0.0.6.tgz","fileCount":7,"unpackedSize":60382,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDi5mmRcrKW9hQmgE3zGZv1aS/vCaeRBYgssAQM5ksqewIgW4AM+1OCIPHjAR2ppauwBk6gbg3L1mZ1BdkkL6QBzlI="}]},"_npmUser":{"name":"antivixen","email":"egregor2011@gmail.com"},"directories":{},"maintainers":[{"name":"antivixen","email":"egregor2011@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-if-else_0.0.6_1693254226425_0.2083935638688057"},"_hasShrinkwrap":false}},"time":{"created":"2023-08-28T19:30:47.976Z","0.0.2":"2023-08-28T19:30:48.286Z","modified":"2023-08-28T20:23:46.751Z","0.0.3":"2023-08-28T19:44:03.523Z","0.0.4":"2023-08-28T19:48:35.899Z","0.0.5":"2023-08-28T20:01:48.880Z","0.0.6":"2023-08-28T20:23:46.581Z"},"maintainers":[{"name":"antivixen","email":"egregor2011@gmail.com"}],"description":"React JS library for the conditional rendering","homepage":"https://github.com/antivixen/react-if-else#readme","keywords":["react","if else","conditional rendering","JSX"],"repository":{"type":"git","url":"git+https://github.com/antivixen/react-if-else.git"},"author":{"name":"antivixen"},"bugs":{"url":"https://github.com/antivixen/react-if-else/issues"},"license":"MIT","readme":"# React If Else\n\nClassical If/Else statement solution for the conditional rendering in React JS.\n\n## Usage\n\n```ts\nimport { ConditionalView, If, Else } from \"@antivixen/react-if-else\";\n\nexport const BasicExample = () => {\n  const { isLoading, isError, data } = getAsyncData();\n  return (\n    <>\n      <h1>Our data</h1>\n      <ConditionalView>\n        <If when={isLoading}>\n          <h2>Loading..</h2>\n        </If>\n        <If when={isError}>\n          <h2>Error</h2>\n        </If>\n        <Else>\n          <div>{data}</div>\n        </Else>\n      </ConditionalView>\n    </>\n  );\n};\n```\n\n## Why?\n\nWhy, you might ask? Well, as we can observe from the given example, it's quite evident that the state aligns with the rendered hierarchy. Another option could be:\n\n```ts\nexport const PureExample = () => {\n  const { isLoading, isError, data } = getAsyncData();\n  return (\n    <>\n      <h1>Our data</h1>\n      {isLoading ? (\n        <h2>Loading</h2>\n      ) : isError ? (\n        <h2>Error</h2>\n      ) : (\n        <dic>{data}</dic>\n      )}\n    </>\n  );\n};\n```\n\nTo adopt a cleaner code approach, you should elevate the static data title and eliminate the redundant and overly complex ternary operator.\ni\n\n```ts\nexport const PureAdvancedExample = () => {\n  const { isLoading, isError, data } = getAsyncData();\n\n  if (isLoading) {\n    return (\n      <TitleContainer>\n        <h1>Loading..</h1>\n      </TitleContainer>\n    );\n  }\n\n  if (isError) {\n    return (\n      <TitleContainer>\n        <h1>Erorr</h1>\n      </TitleContainer>\n    );\n  }\n\n  return (\n    <TitleContainer>\n      <dic>{data}</dic>\n    </TitleContainer>\n  );\n};\n```\n\nThis not only appears significantly more verbose but also compels us to divide the view into two parts, resulting in the creation of more abstract layers.\n\n`react-if-else` is better to be used for complex if/else rendering scenarios. If you need a solution to show/hide elements based on dynamic values, you should probably investigate [this library](https://www.npmjs.com/package/@antivixen/react-show-case)\n","readmeFilename":"README.md"}