{"id":13402833,"url":"https://github.com/wyc/semantic-ui-react-todos","last_synced_at":"2025-09-09T00:33:12.263Z","repository":{"id":18875959,"uuid":"84371903","full_name":"wyc/semantic-ui-react-todos","owner":"wyc","description":"The ReactJS/Redux Todo List Example with Semantic UI Components","archived":false,"fork":false,"pushed_at":"2023-03-03T10:14:54.000Z","size":6407,"stargazers_count":95,"open_issues_count":14,"forks_count":32,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-08-23T10:42:04.428Z","etag":null,"topics":["react-redux","reactjs","semantic-ui","semantic-ui-react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/wyc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-03-08T22:24:48.000Z","updated_at":"2023-04-28T23:02:32.000Z","dependencies_parsed_at":"2024-01-16T10:35:11.087Z","dependency_job_id":"ab8532c6-3648-48fe-984f-a1eee7f73eef","html_url":"https://github.com/wyc/semantic-ui-react-todos","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wyc/semantic-ui-react-todos","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wyc%2Fsemantic-ui-react-todos","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wyc%2Fsemantic-ui-react-todos/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wyc%2Fsemantic-ui-react-todos/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wyc%2Fsemantic-ui-react-todos/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wyc","download_url":"https://codeload.github.com/wyc/semantic-ui-react-todos/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wyc%2Fsemantic-ui-react-todos/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274231111,"owners_count":25245687,"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-08T02:00:09.813Z","response_time":121,"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":["react-redux","reactjs","semantic-ui","semantic-ui-react"],"created_at":"2024-07-30T19:01:21.499Z","updated_at":"2025-09-09T00:33:12.237Z","avatar_url":"https://github.com/wyc.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# semantic-ui-react-todos\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://i.imgur.com/3H4CDEK.png\" /\u003e\u003c/p\u003e\n\nThis project is the [react-redux Todo List example](https://github.com/reactjs/redux/tree/master/examples/todos) modified to use [semantic-ui](http://semantic-ui.com) components via the [semantic-ui-react](http://react.semantic-ui.com) integration. It is meant as a variation on a well-known example project to familiarize ReactJS developers with the installation and use of Semantic UI.\n\nThis project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).\n\n## Running\n\n```bash\n$ npm install\n$ npm start\n```\n\nThe server should be live at \u003chttp://localhost:3000\u003e.\n\n## How to get from react-redux todos example to this project\n\n### Requirements\nWhen trying to build Semantic-UI,  I've only had success with `npm@6`,\n`node@8`, and `gulp@3` due to version incompatibilities of [Semantic-UI with\n`gulp@4`](https://github.com/Semantic-Org/Semantic-UI/issues/6705) and [`\u003enode@8` with `gulp@3`](https://github.com/nodejs/node/issues/19786).\nHopefully these will get fixed upstream, but until then you may have to revert\nversions to work with Semantic-UI at all. Here's my working setup:\n\n```\n$ node --version\nv8.16.0\n$ npm --version\n6.4.1\n$ gulp --version\n[12:29:54] CLI version 3.9.1\n[12:29:54] Local version 3.9.1\n```\n\nThe `gulp` version is specified in the `package.json`, but you may need to\nsetup `npm` and `node` for your system.\n\n\n### Install `semantic-ui` and `semantic-ui-react`\n\n```bash\n$ npm install --save semantic-ui-react \n$ npm install --save-dev semantic-ui\n```\nFollow the prompts for the `semantic-ui` package, choosing the most customizable option, which saves to the project directory. There's also the option to leave the `semantic/` directory in `node_modules/`, which would result in no additional project directory files at the expense of not being able to specify a different Semantic UI theme. With these files in the project directory, theme customization can be done in `semantic/src/theme.config` and `semantic/src/themes/`. See [the Semantic UI usage docs](http://react.semantic-ui.com/usage) for more information.\n\n### Build and link the Semantic UI `dist/` files\n\nSemantic UI uses the tool `gulp` to build. If you do not have it, you may want to [install it globally](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md). The following build steps must be done after every change to themes or other modifications to `semantic` itself.\n```bash\n$ (cd src/semantic \u0026\u0026 gulp build)\n```\n\nWe must now link the newly generated CSS file as a dependency into `src/index.js` so that [Webpack](https://webpack.github.io/) knows to bundle it:\n\nIn `src/index.js`, add:\n```js\nimport '../semantic/dist/semantic.min.css';\n```\n\n### Replace desired components\n\nThe best way to understand this is to peek at the source files.\n\n- `src/components/Todo.js`: The individual `Todo` items have been changed to [`Checkbox`](http://react.semantic-ui.com/modules/checkbox).\n- `src/components/Footer.js`, `src/components/Link.js`: The filter links have been changed to [`Button`](http://react.semantic-ui.com/elements/button) and its subclasses.\n- `src/containers/AddTodo.js`: The input box has been changed to [`Input`](http://react.semantic-ui.com/elements/input), and the submit button has been changed to [`Button`](http://react.semantic-ui.com/elements/button).\n\n### Notes\n\n- The swap-out process was very painless. ReactJS itself has great separation of concerns, and this framework respects that a lot. Aside from installing the libraries, there wasn't anything that had to be done outside of the component-specific file.\n- Caveat: Now we have more configuration files/folders to manage, but as discussed above, this isn't necessary and is simply a decision in the trade-off between customizability and configuration simplicity.\n- Caveat: Because `\u003cinput /\u003e` components are nested in the Semantic UI provided `\u003cdiv\u003e\u003c/div\u003e`s, [`ref=` properties](https://facebook.github.io/react/docs/refs-and-the-dom.html) on Semantic UI input elements will not work as intended. See discussions and workarounds in this thread: \u003chttps://github.com/Semantic-Org/Semantic-UI-React/issues/405\u003e.\n\nOverall, I'm very happy with this framework, and I think it will play nicely with other ReactJS components without any hitches. It will definitely save me development time.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwyc%2Fsemantic-ui-react-todos","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwyc%2Fsemantic-ui-react-todos","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwyc%2Fsemantic-ui-react-todos/lists"}