Several examples built with Semantic UI, React, and TypeScript.
Each example was created with create-react-app and react-scripts-ts using the following command:
create-react-app my-app --scripts-version=react-scripts-tsFor 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!
Fixes 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 for layout instead, that extra padding is not required.
Ask 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.
Change 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.
Keep 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.
Navigate between views using navigation fixed to the bottom, powered by React Router.