Semantic UI, React, and TypeScript Examples

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-ts

For 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!

Fixed Header/Footer Layout

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.

• Run Fixed Header/Footer Layout example

Magic 8-Ball Chat

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.

• Run Magic 8-Ball Chat example

Loan Payment Calculator

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.

• Run Loan Payment Calculator example

Todos

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.

• Run Todos example

Bottom Navigation with Router

Navigate between views using navigation fixed to the bottom, powered by React Router.

• Run Bottom Navigation with Router example