{"id":14987524,"url":"https://github.com/doemser/dead-simple-react","last_synced_at":"2025-09-23T19:21:24.885Z","repository":{"id":174310349,"uuid":"569261127","full_name":"doemser/dead-simple-react","owner":"doemser","description":"Dead simple, advanced examples to learn to love react and some of its libraries.","archived":false,"fork":false,"pushed_at":"2023-01-12T10:10:48.000Z","size":543,"stargazers_count":52,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-19T01:44:08.039Z","etag":null,"topics":["bloat-free","examples","games","kiss","mui","prototypes","react","react-hooks","styled-components","zustand"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/doemser.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-22T12:44:20.000Z","updated_at":"2024-11-07T20:32:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"f8cb58c0-c040-4ada-8287-95bf83eba58c","html_url":"https://github.com/doemser/dead-simple-react","commit_stats":{"total_commits":129,"total_committers":2,"mean_commits":64.5,"dds":"0.015503875968992276","last_synced_commit":"19dd159b79c2c616d8d832af8701035e858c5d9a"},"previous_names":["doemser/dead-simple-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/doemser/dead-simple-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doemser%2Fdead-simple-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doemser%2Fdead-simple-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doemser%2Fdead-simple-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doemser%2Fdead-simple-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doemser","download_url":"https://codeload.github.com/doemser/dead-simple-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doemser%2Fdead-simple-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276633655,"owners_count":25677146,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-23T02:00:09.130Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bloat-free","examples","games","kiss","mui","prototypes","react","react-hooks","styled-components","zustand"],"created_at":"2024-09-24T14:14:52.838Z","updated_at":"2025-09-23T19:21:24.822Z","avatar_url":"https://github.com/doemser.png","language":null,"readme":"# \u003cimg src=\"./assets/png/dead-simple-react-logo.png\" alt=\"dead-simple-react\"/\u003e\n\nDead simple, advanced examples to learn to love react and some of its libraries.\n\n---\n\n## To-do App - Principles\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eAdding to-do\u003c/font\u003e\u003c/summary\u003e\nA form that submits to-dos to a list.\n\n- uses a controlled input\n- input field is required\n- input field clears after form submit\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-principles/adding-todo-app\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-principles/adding-todo-app-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eCompleting to-do\u003c/font\u003e\u003c/summary\u003e\nA completable to-dos list.\n\n- uses a controlled input of type checkbox\n- uses `map()` to toggle each todo's completed state\n- uses inline-styling to show if completed\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-principles/completing-todo-app\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-principles/completing-todo-app-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eDeleting to-do\u003c/font\u003e\u003c/summary\u003e\nA deletable to-do list.\n\n- uses `filter()` method to delete item\n- has no confirm message\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-principles/deleting-todo-app\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-principles/deleting-todo-app-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eEditing to-do\u003c/font\u003e\u003c/summary\u003e\nAn editable to-do list.\n\n- uses `map()` method to toggle if todo is in edit mode\n- edit mode swaps span with input\n- input controlled by todo name\n- changes are directly written into the state\n\n\u003e this is dead simple - but edit mode should not be in the data we mock as a database, better keep your data structure clean from states that are only needed to render on the frontend.\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-principles/editing-todo-app\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-principles/editing-todo-app-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n---\n\n## To-do App - Advanced\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eAdding to-do - multiple inputs\u003c/font\u003e\u003c/summary\u003e\nA form that submits to-dos with multiple values to a list.\n\n- uses `new FormData()` and `Object.fromEntries()` instead of controlled inputs\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-advanced/adding-todo-app-multiple-inputs\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-advanced/adding-todo-app-multiple-inputs-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eDeleting to-do - confirm message\u003c/font\u003e\u003c/summary\u003e\nA deletable todo list that asks for confirmation before deleting.\n\n- uses custom component\n- uses \"Lifting up State\"\n- uses nested useState for delete mode\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-advanced/deleting-todo-app-confirm-message\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-advanced/deleting-todo-app-confirm-message-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eDeleting to-do - move to trash\u003c/font\u003e\u003c/summary\u003e\nA deletable todo list that moves item to trash list.\n\n- marks a to-do for trash\n- uses `filter()` chained with `map()`\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-advanced/deleting-todo-app-move-to-trash\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-advanced/deleting-todo-app-move-to-trash-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eEditing to-do - keeping data clean\u003c/font\u003e\u003c/summary\u003e\nAn editable to-do list with nested edit mode toggle.\n\n- uses custom component\n- uses \"Lifting up State\"\n- keeps data structure clean from an items edit state\n- uses formData and controlled input\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-advanced/editing-todo-app-keeping-data-clean\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-advanced/editing-todo-app-keeping-data-clean-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eSaving to-do - using localStorage\u003c/font\u003e\u003c/summary\u003e\nA todo-list that is saved in your localStorage.\n\n- uses `localStorage.setItem()`\n- uses `localStorage.getItem()`\n\n\u003e Note that this solution will not work in a ssr environment. For ssr use `useSyncExternalStore` or a dedicated library.\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-advanced/saving-todo-app-using-localstorage\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-advanced/saving-todo-app-using-localstorage-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eSorting to-do - swapping neighbors\u003c/font\u003e\u003c/summary\u003e\nTodo-list which allows you to swap neighboring to-dos.\n\n- clones the state array to make it mutable\n\n\u003e If you are looking for a better solution, you probably want to take a look at `splice()`method.\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-advanced/sorting-todo-app-swapping-neighbors\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-advanced/sorting-todo-app-swapping-neighbors-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n---\n\n## To-do App - Disguised\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eColor Palette Creator\u003c/font\u003e\u003c/summary\u003e\nA form that submits colors to a list from where you can copy the hex codes.\n\n- text and color input are using the same useState\n- uses async function `navigator.clipboard.writeText()`\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-disguised/todo-app-disguised-color-palette-creator\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-disguised/todo-app-disguised-color-palette-creator-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003e Depending on the browser, this will throw an error in Codesandbox's editor-mode, but will most likely work if you open the app in a new window.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eBudget Planner\u003c/font\u003e\u003c/summary\u003e\nA form that submits expenses and calculates a budget.\n\n- uses a loading bar to display rest budget\n- uses controlled inputs\n- uses `Number.parseFloat()`\n- uses `Math.round()`\n- size at where you should split up custom components\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-disguised/todo-app-disguised-budget-planner\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-disguised/todo-app-disguised-budget-planner-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eSpeech Synthesizer\u003c/font\u003e\u003c/summary\u003e\nA form that says what you submit to a list from which you can say it again.\n\n- uses Web Speech API\n- uses your browsers default language/voice\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-disguised/todo-app-disguised-speech-synthesizer\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e \u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-disguised/todo-app-disguised-speech-synthesizer-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eReview Writer\u003c/font\u003e\u003c/summary\u003e\nA form that submits 5-star reviews.\n\n- uses `Array.from()`\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-disguised/todo-app-disguised-review-writer\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e \u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/todo-app-disguised/todo-app-disguised-review-writer-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n---\n\n## Fetching\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eFetching - nested fetching\u003c/font\u003e\u003c/summary\u003e\nFetch that receives data including another url you need to fetch.\n\n- uses async/await\n- uses a loading state\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/fetching/fetching-nested-fetching\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e \u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/fetching/fetching-nested-fetching-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eFetching - handling race conditions\u003c/font\u003e\u003c/summary\u003e\nFetch with pagination that handles race conditions.\n\n- uses async/await\n- uses pagination to fetch\n- uses a cleanup function in useEffect to set an ignore flag\n\n\u003e While fetching with pagination it is not guaranteed, that responses arrive in the same order we request them, so we manually take care, that the last request will always be the last no matter if it responded faster than an earlier request.\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/fetching/fetching-handling-race-conditions\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e \u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/fetching/fetching-handling-race-conditions-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n---\n\n## Custom Hooks\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003euseMousePosition\u003c/font\u003e\u003c/summary\u003e\nCustom hook that returns the position of the mouse.\n\n- uses `window.addEventListener()` and `window.removeEventListener()`\n- uses a cleanup function in a useEffect\n- one of the most easiest self written hooks\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/custom-hooks/custom-hooks-use-mouse-position\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e \u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/custom-hooks/custom-hooks-use-mouse-position-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eusePagination\u003c/font\u003e\u003c/summary\u003e\nCustom hook you can use to implement pagination.\n\n- returns an object with 4 values\n- returns current page\n- returns function for next and previous page\n- returns function to set a specific page\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/custom-hooks/custom-hooks-use-pagination\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/custom-hooks/custom-hooks-use-pagination-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003euseFetch\u003c/font\u003e\u003c/summary\u003e\nCustom hook you can use to fetch.\n\n- returns an object with 3 values\n- returns data\n- returns returns loading state\n- returns returns error state\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/custom-hooks/custom-hooks-use-fetch\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/custom-hooks/custom-hooks-use-fetch-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n---\n\n## Games\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eMemory Cards\u003c/font\u003e\u003c/summary\u003e\nThis is a super minimal version of a memory cards game.\n\n- uses zustand.js\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/games/games-memory-cards\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e \u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/games/games-memory-cards-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eArcade Survival Game\u003c/font\u003e\u003c/summary\u003e\nThis is a super minimal version of an arcade game.\n\n- uses zustand.js\n- uses use-wasd\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/games/games-arcade-survival\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e \u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/games/games-arcade-survival-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eConway´s Game of Life\u003c/font\u003e\u003c/summary\u003e\nThis is a super minimal version of the most famous zero player game.\n\n- uses zustand.js\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/games/games-conways-game-of-life\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e \u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/games/games-conways-game-of-life-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eTic-Tac-Toe\u003c/font\u003e\u003c/summary\u003e\nAs a local multiplayer version.\n\n- uses zustand.js\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/games/games-tic-tac-toe\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e \u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/games/games-tic-tac-toe-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n---\n\n## \u003ca href=\"https://www.npmjs.com/package/zustand\" target=\"_blank\"\u003ezustand.js\u003c/a\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eTo-do App\u003c/font\u003e\u003c/summary\u003e\nTo-do App that uses global state with zustand.js.\n\n- can add using spreading\n- can delete using `filter()`\n- can complete using `map()`\n\n\u003e Note that zustand.js as a global state management system can be imported directly into components, no matter how deep they are nested in the tree.\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/zustand/zustand-todo-app\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e \u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/zustand/zustand-todo-app-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eFetching\u003c/font\u003e\u003c/summary\u003e\nFetch that uses global state with zustand.js.\n\n- can be accessed by every component\n- `useStore.getState().fetchPlanets()` syntax allows us leaving`fetchPlanets` out of useEffect dependency array\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/zustand/zustand-fetching\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e \u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/zustand/zustand-fetching-ts\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox-ts.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eAPI imitation\u003c/font\u003e\u003c/summary\u003e\nMimics the zustand.js library.\n\n\u003e Doesn't have everything, but enough to gain a much deeper understanding.\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/zustand/zustand-api-imitation\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n---\n\n## \u003ca href=\"https://www.npmjs.com/package/styled-components\" target=\"_blank\"\u003estyled-components\u003c/a\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eButton-Link-Component\u003c/font\u003e\u003c/summary\u003e\nCustom component that either returns a button or an anchor.\n\n- similar to [mui's Button Component](https://mui.com/material-ui/react-button/)\n- can be used for every button and link in your app\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/styled-components/styled-components-button-component\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eTypography-Component\u003c/font\u003e\u003c/summary\u003e\nCustom component that returns styled text components depending on the props you pass.\n\n- similar to [mui's Typography Component](https://mui.com/material-ui/react-typography/)\n- can be used for every piece of text in your app\n- accepts `children`, `variant`, `component` and every other prop you want to use\n\n\u003e Setting component (semantic) independently from variant (styling) separates concerns.\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/styled-components/styled-components-typography-component\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eAPI imitation\u003c/font\u003e\u003c/summary\u003e\nImitates the most basic feature of styled-components.\n\n\u003e Does not have all the features by far, but the most basic functionality becomes more accessible and comprehensible.\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/styled-components/styled-components-api-imitation\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n---\n\n## \u003ca href=\"https://www.npmjs.com/package/use-wasd\" target=\"_blank\"\u003euse-wasd\u003c/a\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eBasic example\u003c/font\u003e\u003c/summary\u003e\nReturns an object containing the keys you pressed and whether you are currently pressing them.\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/use-wasd/use-wasd-basic\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eCombos example\u003c/font\u003e\u003c/summary\u003e\nLets you declare custom keyboard combos/shortcuts.\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/use-wasd/use-wasd-combos\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eInitial value example\u003c/font\u003e\u003c/summary\u003e\nLets you initialize the hook.\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/use-wasd/use-wasd-initial-value\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003ePrevent default example\u003c/font\u003e\u003c/summary\u003e\nLets you prevent default browser behavior for keys.\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/use-wasd/use-wasd-prevent-default\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eref example\u003c/font\u003e\u003c/summary\u003e\nLets you attach the event listener to a different element than the window.\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/use-wasd/use-wasd-ref\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cfont size=\"3\"\u003eVanilla Source Code\u003c/font\u003e\u003c/summary\u003e\nThis is the no typescript version of \u003ca href=\"https://www.npmjs.com/package/use-wasd\"\u003euseWASD\u003c/a\u003e npm package.\n\n- highly complicated\n\n\u003ca href=\"https://githubbox.com/doemser/dead-simple-react/tree/main/examples/use-wasd/use-wasd-vanilla\" target=\"_blank\"\u003e![Edit in Codesandbox](./assets/png/edit-in-codesandbox.png)\u003c/a\u003e\n\n\u003c/details\u003e\n\n---\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoemser%2Fdead-simple-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoemser%2Fdead-simple-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoemser%2Fdead-simple-react/lists"}