TypeScript icon, indicating that this package has built-in type declarations

0.1.2 • Public • Published

# semantic-ui-react-transition-modal

Semantic UI React Transition Modal

A simple animation wrapper over the Semantic UI React modal component.


Without an official modal animation feature set in stone by Semantic UI React (see this issue), one has to make workarounds. This library aims to fill that in by merging the animation props of the <Transition> component and the visibility state control props of the <Modal> component into one convenient set.




npm install --save react
npm install --save react-dom
npm install --save semantic-ui-react
npm install --save semantic-ui-react-transition-modal


yarn add react
yarn add react-dom
yarn add semantic-ui-react
yarn add semantic-ui-react-transition-modal

This library was written in TypeScript. So, typings have already been provided. No further installation is required on your end.

Simply import TransitionModal in order to use it. It also comes prepackaged with the usual Modal subcomponents, with no modifications, so you can use them as you usually do:

  • TransitionModal.Header
  • TransitionModal.Content
  • TransitionModal.Description
  • TransitionModal.Actions


import React from 'react';
import { Button } from 'semantic-ui-react';
import { TransitionModal } from 'semantic-ui-react-transition-modal';
import logo from './logo.svg';
import './App.css';
import 'semantic-ui-css/semantic.min.css';
export function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
          animation="fade up"
          Edit <code>src/App.tsx</code> and save to reload.
          rel="noopener noreferrer"
          Learn React


This library uses a combination of props from Semantic UI React's <Transition> and <Modal> components. Since this library is mostly just a simple wrapped component, the recommended way to understand the API is to refer to the official documentation.

The only notable exception is the exclusion of some props which is necessary in order to make the <TransitionModal /> component work:

Component Prop Reason to exclude
<Transition> visible The <Modal>'s open prop will provide the same functionality, making this prop redundant.
<Transition> unmountOnHide The <Modal>'s ability to close is influenced by the <Transition>'s ability to unmount the component within it when closed. If this prop was allowed to be set to false, the <Modal> will not be able to be closed once opened. There should be no risk here; <Modal> unmounts its contents the same way this library unmounts its <Modal>'s contents, so, the expected behavior should be roughly equivalent.
<Modal> open Not quite an exclusion, but note that this prop will affect both the visible state of <Transition> and the open state of <Modal>.

This library is controlled autonomously by its open prop if it has not been provided externally. You may use this component uncontrolled.



npm i semantic-ui-react-transition-modal

DownloadsWeekly Downloads






Unpacked Size

498 kB

Total Files


Last publish


  • andrewsantarin