Semantic UI React

Common errors

• Module not found: Can't resolve 'semantic-ui-react'

  cause The `semantic-ui-react` package has not been installed or is not correctly linked in your project.
  fix Run `npm install semantic-ui-react` or `yarn add semantic-ui-react` to add the package to your project dependencies.

• TypeError: Cannot read properties of undefined (reading 'call') at Object.createReactClass.displayName [as render]

  cause This often occurs when trying to use a component that is not correctly imported or when `this` context is lost in class components. Could also be a mismatch in React versions or a build configuration issue.
  fix Verify that all Semantic UI React components are correctly imported as named exports. Ensure your `react` and `react-dom` peer dependencies match the library's requirements. For class components, bind event handlers correctly.

• Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

  cause This error typically indicates that you are trying to render something that React doesn't recognize as a valid component. This could be due to a wrong import (e.g., `import * as SUI from 'semantic-ui-react'` and then trying to use `<SUI.Button>` without explicit named exports, or a default import where a named import is expected).
  fix Ensure you are using named imports for Semantic UI React components, e.g., `import { Button } from 'semantic-ui-react';`. Avoid default imports unless explicitly specified by the library for a particular component.

• Warning: Failed prop type: The prop `children` is marked as required in `YourComponent`, but its value is `undefined`.

  cause Semantic UI React components often have strict prop types. This warning indicates a required prop (like `children` or another specific prop) was not provided or was `undefined`.
  fix Review the component's documentation for required props. Ensure all mandatory props are passed and have valid values. For example, a `Message` component might expect `header` or `content`.

Warnings

• breaking The `Ref` component was removed in v3.0.0-beta.0. All components now support native React ref forwarding directly. Components that previously relied on `Ref` will need to be updated.
  Fix: Migrate usage from `<Ref innerRef={ref}>` to `ref={ref}` directly on the Semantic UI React component. Consult the v3 migration guide for details.
• gotcha Semantic UI React provides only the component logic and markup. It does not include the styling itself. You MUST include the Semantic UI CSS toolkit in your project, typically by importing `semantic-ui-css/semantic.min.css`.
  Fix: Add `import 'semantic-ui-css/semantic.min.css';` to your application's entry file (e.g., `index.js` or `App.js`) or include it via a CDN in your HTML.
• breaking Type definitions have been updated in v2.1.3 and v2.1.4 to improve compatibility with TypeScript 4.8+ and `@types/react@18`. Older TypeScript versions or `@types/react` might encounter type errors.
  Fix: Ensure your project uses TypeScript 4.8 or newer and `@types/react` version 18 for full type compatibility. Upgrade your TypeScript and React types if issues arise.
• gotcha Semantic UI React components rely on specific CSS classes for styling. If you're using a custom build of Semantic UI CSS or a theming solution, ensure that all required classes are present, otherwise, components may appear unstyled or broken.
  Fix: Verify that your custom Semantic UI CSS build includes all necessary components. For full compatibility, consider using the official `semantic-ui-css` package or carefully managing your custom theme builds.
• deprecated Earlier versions might have included direct references to `React.PropTypes`. While no longer used, ensure your project's ESLint rules or build processes don't incorrectly flag these as deprecated issues if referencing older code examples.
  Fix: Update any legacy code that might refer to `React.PropTypes` (long removed from React) to modern alternatives like TypeScript or external prop-types library.

Install

• npm install semantic-ui-react npm
• yarn add semantic-ui-react yarn
• pnpm add semantic-ui-react pnpm

Imports

• Button
  wrong:

  const Button = require('semantic-ui-react').Button;

  correct:

  import { Button } from 'semantic-ui-react';

  Semantic UI React is primarily designed for ES module imports. CommonJS `require` is discouraged in modern React projects.
• Form

  import { Form, Input, TextArea, Button } from 'semantic-ui-react';

  Commonly imported components are named exports. Destructuring allows importing multiple components efficiently.
• SemanticShorthandItem

  import type { SemanticShorthandItem } from 'semantic-ui-react';

  Type imports are crucial for TypeScript projects using Semantic UI React's shorthand prop patterns.

Quickstart

This quickstart demonstrates a basic React form using Semantic UI React components, including input fields, a button, and messages. It shows state management with React hooks and how to include the necessary Semantic UI CSS stylesheet for proper styling.

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
import { Button, Form, Segment, Grid, Message } from 'semantic-ui-react';
import 'semantic-ui-css/semantic.min.css'; // Don't forget to include Semantic UI CSS!

function App() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = () => {
    setSubmitted(true);
    console.log({ name, email });
    // In a real app, you would send this data to a server
  };

  return (
    <Grid centered columns={2} style={{ marginTop: '5em' }}>
      <Grid.Column>
        <Segment>
          <Message
            attached
            header='Welcome to our site!'
            content='Fill out the form below to sign-up for a new account'
          />
          <Form className='attached fluid segment' onSubmit={handleSubmit}>
            <Form.Input
              label='Name'
              placeholder='First Name'
              value={name}
              onChange={(e) => setName(e.target.value)}
              required
            />
            <Form.Input
              label='Email'
              placeholder='example@domain.com'
              type='email'
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
            <Button primary type='submit'>Submit</Button>
          </Form>
          {submitted && (
            <Message success>
              <Message.Header>Form Submitted</Message.Header>
              <p>Name: {name}, Email: {email}</p>
            </Message>
          )}
        </Segment>
      </Grid.Column>
    </Grid>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(<App />);