{"id":15342181,"url":"https://github.com/joshtynjala/semantic-ui-react-typescript-examples","last_synced_at":"2025-10-10T22:30:25.500Z","repository":{"id":136811232,"uuid":"101420932","full_name":"joshtynjala/semantic-ui-react-typescript-examples","owner":"joshtynjala","description":"Several examples using Semantic UI, React, and TypeScript","archived":true,"fork":false,"pushed_at":"2017-09-14T18:32:20.000Z","size":18152,"stargazers_count":38,"open_issues_count":1,"forks_count":14,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-01-28T10:35:09.254Z","etag":null,"topics":["create-react-app","react","reactjs","semantic-ui","semantic-ui-react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/joshtynjala.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":"2017-08-25T16:12:40.000Z","updated_at":"2023-12-14T15:37:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"4761b013-64b8-44df-9144-e2c65bde0ed9","html_url":"https://github.com/joshtynjala/semantic-ui-react-typescript-examples","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/joshtynjala/semantic-ui-react-typescript-examples","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshtynjala%2Fsemantic-ui-react-typescript-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshtynjala%2Fsemantic-ui-react-typescript-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshtynjala%2Fsemantic-ui-react-typescript-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshtynjala%2Fsemantic-ui-react-typescript-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joshtynjala","download_url":"https://codeload.github.com/joshtynjala/semantic-ui-react-typescript-examples/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshtynjala%2Fsemantic-ui-react-typescript-examples/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279005473,"owners_count":26083902,"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-10-10T02:00:06.843Z","response_time":62,"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":["create-react-app","react","reactjs","semantic-ui","semantic-ui-react","typescript"],"created_at":"2024-10-01T10:42:29.859Z","updated_at":"2025-10-10T22:30:25.489Z","avatar_url":"https://github.com/joshtynjala.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Semantic UI, React, and TypeScript Examples\n\nSeveral examples built with [Semantic UI](https://react.semantic-ui.com/), [React](https://facebook.github.io/react/), and [TypeScript](https://www.typescriptlang.org/).\n\nEach example was created with [create-react-app](https://www.npmjs.com/package/create-react-app) and [react-scripts-ts](https://www.npmjs.com/package/react-scripts-ts) using the following command:\n\n``` bash\ncreate-react-app my-app --scripts-version=react-scripts-ts\n```\n\nFor local development, run `npm start` in the root directory of any of these examples, and it will automatically start a server, launch the example in your browser, and watch for any changes that you make to the code. The page will reload with your changes automatically!\n\n## [Fixed Header/Footer Layout](https://joshtynjala.github.io/semantic-ui-react-typescript-examples/fixed-header-footer-layout/)\n\n\u003cimg src=\"screenshots/fixed-header-footer-layout.png?raw=true\" width=\"320\"\u003e\n\nFixes a header to the top of the view port and a footer to the bottom, while the region in the middle can scroll. Semantic UI supports fixed menus on the top and bottom out of the box, but they require manually adding padding to the middle region to avoid overlap. By using [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) for layout instead, that extra padding is not required.\n\n* [Run Fixed Header/Footer Layout example](https://joshtynjala.github.io/semantic-ui-react-typescript-examples/fixed-header-footer-layout/)\n\n## [Magic 8-Ball Chat](https://joshtynjala.github.io/semantic-ui-react-typescript-examples/magic-eight-ball-chat/)\n\n\u003cimg src=\"screenshots/magic-eight-ball-chat.png?raw=true\" width=\"320\"\u003e\n\nAsk a yes or no question to the magic 8-ball and it will give you an answer. Styled like a chat application with a list of messages. The messages have different styles, depending on the person who sent each one.\n\n* [Run Magic 8-Ball Chat example](https://joshtynjala.github.io/semantic-ui-react-typescript-examples/magic-eight-ball-chat/)\n\n## [Loan Payment Calculator](https://joshtynjala.github.io/semantic-ui-react-typescript-examples/loan-payment-calculator/)\n\n\u003cimg src=\"screenshots/loan-payment-calculator.png?raw=true\" width=\"320\"\u003e\n\nChange the the principal, the interest rate, and the number of years required to pay back the loan to calculate your monthly payment. Includes a custom NumericStepper component.\n\n* [Run Loan Payment Calculator example](https://joshtynjala.github.io/semantic-ui-react-typescript-examples/loan-payment-calculator/)\n\n## [Todos](https://joshtynjala.github.io/semantic-ui-react-typescript-examples/todos/)\n\n\u003cimg src=\"screenshots/todos.png?raw=true\" width=\"320\"\u003e\n\nKeep track of a list of things you need to do. Add items, check them when completed, and clear all completed items. Shows how to create a list that displays some simple data, along with how to add and remove items from the data provider.\n\n* [Run Todos example](https://joshtynjala.github.io/semantic-ui-react-typescript-examples/todos/)\n\n## [Bottom Navigation with Router](https://joshtynjala.github.io/semantic-ui-react-typescript-examples/bottom-navigation-with-router/)\n\n\u003cimg src=\"screenshots/bottom-navigation-with-router.png?raw=true\" width=\"320\"\u003e\n\nNavigate between views using navigation fixed to the bottom, powered by [React Router](https://reacttraining.com/react-router/).\n\n* [Run Bottom Navigation with Router example](https://joshtynjala.github.io/semantic-ui-react-typescript-examples/bottom-navigation-with-router/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshtynjala%2Fsemantic-ui-react-typescript-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoshtynjala%2Fsemantic-ui-react-typescript-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshtynjala%2Fsemantic-ui-react-typescript-examples/lists"}