### Install Semantic UI React with Yarn or NPM
Source: https://github.com/semantic-org/semantic-ui-react/blob/master/docs/src/pages/Usage.mdx
Installs the semantic-ui-react and semantic-ui-css packages using either yarn or npm. This is the recommended way to add Semantic UI React to your project.
```bash
yarn add semantic-ui-react semantic-ui-css
## Or NPM
```
```bash
npm install semantic-ui-react semantic-ui-css
```
--------------------------------
### Start Semantic UI React Project with Yarn
Source: https://github.com/semantic-org/semantic-ui-react/blob/master/docs/src/pages/Theming.mdx
This command initiates the development server for your Semantic UI React project. Ensure you have Yarn installed and the project dependencies are set up.
```bash
yarn start
```
--------------------------------
### Import Semantic UI CSS
Source: https://github.com/semantic-org/semantic-ui-react/blob/master/docs/src/pages/Usage.mdx
Imports the minified Semantic UI CSS file into your application's entry point. This ensures that the styles are applied globally.
```javascript
import 'semantic-ui-css/semantic.min.css'
```
--------------------------------
### Import Components for Layout Examples
Source: https://github.com/semantic-org/semantic-ui-react/blob/master/docs/src/pages/Layouts.mdx
Imports necessary components like Link from 'react-static' and Card, Header from 'semantic-ui-react' for creating layout examples.
```javascript
import { Link } from 'react-static'
import { Card, Header } from 'semantic-ui-react'
```
--------------------------------
### Include Semantic UI via CDN
Source: https://github.com/semantic-org/semantic-ui-react/blob/master/docs/src/pages/Usage.mdx
Includes Semantic UI CSS and Semantic UI React JavaScript via CDN links in your HTML file. This method is suitable for projects without a bundler.
```html
```
--------------------------------
### Display Layout Examples with Card.Group
Source: https://github.com/semantic-org/semantic-ui-react/blob/master/docs/src/pages/Layouts.mdx
Uses Header and Card.Group components to display a collection of layout examples, each linking to a specific layout page and providing a brief description and image.
```jsx
```
--------------------------------
### Install Craco and Semantic UI LESS Dependencies
Source: https://github.com/semantic-org/semantic-ui-react/blob/master/docs/src/pages/Theming.mdx
Installs necessary development dependencies, including `@craco/craco` for customizing Create React App's build process and `@semantic-ui-react/craco-less` for LESS support, along with `semantic-ui-less`.
```bash
npm install @craco/craco @semantic-ui-react/craco-less --save-dev
npm install semantic-ui-less --save
```
```bash
yarn add @craco/craco @semantic-ui-react/craco-less --dev
yarn add semantic-ui-less
```
--------------------------------
### Modal Shorthand Examples
Source: https://github.com/semantic-org/semantic-ui-react/blob/master/docs/src/pages/ShorthandProps.mdx
Demonstrates different ways to provide shorthand values for the 'trigger' and 'content' props of a Modal component, including using React elements.
```jsx
Show} content='Content' />
```
```jsx
Show} content={{ content: 'Content' }} />
```
```jsx
Show} content={
Content
} />
```
--------------------------------
### Replace Responsive component with @artsy/fresnel
Source: https://github.com/semantic-org/semantic-ui-react/blob/master/docs/src/pages/MigrationGuideV2.mdx
The 'Responsive' component has been removed. This example shows how to replace it using '@artsy/fresnel' for SSR-compatible responsive design.
```jsx
import { createMedia } from "@artsy/fresnel";
import React from "react";
import { Segment } from "semantic-ui-react";
const AppMedia = createMedia({
breakpoints: {
mobile: 320,
tablet: 768,
computer: 992,
largeScreen: 1200,
widescreen: 1920
}
});
const mediaStyles = AppMedia.createMediaStyle();
const { Media, MediaContextProvider } = AppMedia;
const App = () => (
<>
Mobile
);
```
--------------------------------
### Render a Semantic UI React Button without JSX
Source: https://github.com/semantic-org/semantic-ui-react/blob/master/docs/src/pages/Usage.mdx
Demonstrates how to render a Semantic UI React Button component using React.createElement and the global semanticUIReact object, without using JSX. This is useful for understanding the underlying structure.
```javascript
const e = React.createElement
const { Button } = semanticUIReact
// ... Other JS code ...
const domContainer = document.querySelector('#like_button_container')
// 💡 This example is simplied to use React without JSX
// https://reactjs.org/docs/react-without-jsx.html
ReactDOM.render(e(Button, { primary: true }, 'Hello world!'), domContainer)
```
--------------------------------
### Update Create React App Scripts
Source: https://github.com/semantic-org/semantic-ui-react/blob/master/docs/src/pages/Theming.mdx
Modifies the `scripts` section in `package.json` to use `craco` commands for starting, building, testing, and ejecting the Create React App, enabling custom build configurations.
```json
{
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "craco eject"
}
}
```
--------------------------------
### Semantic UI React pure-react-carousel Integration
Source: https://github.com/semantic-org/semantic-ui-react/blob/master/docs/src/pages/Prototypes.mdx
Demonstrates integrating Semantic UI React with pure-react-carousel for carousel functionality. Includes links to a CodeSandbox example and the source code on GitHub.
```jsx
import { Button, Card, Header, Image } from 'semantic-ui-react'
export const meta = {
title: 'Prototypes',
prevPage: { title: 'Layout examples', href: '/layouts' },
nextPage: { title: 'Migration Guide', href: '/migration-guide' },
}
pure-react-carouselCarousel examples powered by pure-react-carousel.
```
--------------------------------
### Display Page Templates with Card.Group
Source: https://github.com/semantic-org/semantic-ui-react/blob/master/docs/src/pages/Layouts.mdx
Utilizes Header and Card.Group to showcase different page templates, including a homepage, sticky content, fixed menu, and login form, each with descriptive text and associated images.
```jsx
```
--------------------------------
### Semantic UI React react-textarea-autosize Integration
Source: https://github.com/semantic-org/semantic-ui-react/blob/master/docs/src/pages/Prototypes.mdx
Presents examples of using Semantic UI React with react-textarea-autosize for auto-sized textareas. Includes links to CodeSandbox and GitHub for the source code.
```jsx
import { Button, Card, Header, Image } from 'semantic-ui-react'
export const meta = {
title: 'Prototypes',
prevPage: { title: 'Layout examples', href: '/layouts' },
nextPage: { title: 'Migration Guide', href: '/migration-guide' },
}
react-textarea-autosizeExamples of auto sized textareas.
```
--------------------------------
### Use Native Refs with Button Component
Source: https://github.com/semantic-org/semantic-ui-react/blob/master/docs/src/pages/MigrationGuide.mdx
Demonstrates how to use the `ref` prop directly on the `Button` component to get a reference to the underlying DOM element in Semantic UI React v3. This replaces the older method of using `ReactDOM.findDOMNode()`.
```jsx
import { Button } from 'semantic-ui-react'
const App = () => {
const buttonRef = React.useRef()
React.useEffect(() => {
console.log(buttonRef.current)
}, [])
return
}
```
--------------------------------
### Replace Ref Component Usage
Source: https://github.com/semantic-org/semantic-ui-react/blob/master/docs/src/pages/MigrationGuide.mdx
Shows the code difference when migrating from using the `Ref` component in Semantic UI React to directly using the `ref` prop on the child component. It also illustrates importing the `Ref` component from a separate package.
```diff
function App() {
- return (
-
-
-
- )
+ return
}
```
```diff
-import { Ref } from "semantic-ui-react";
+import Ref from "@semantic-ui-react/component-ref";
```
--------------------------------
### Semantic UI React redux-form Integration
Source: https://github.com/semantic-org/semantic-ui-react/blob/master/docs/src/pages/Prototypes.mdx
Showcases an integration of Semantic UI React with redux-form to create a fully functional form. Provides links to a CodeSandbox example and the GitHub repository.
```jsx
import { Button, Card, Header, Image } from 'semantic-ui-react'
export const meta = {
title: 'Prototypes',
prevPage: { title: 'Layout examples', href: '/layouts' },
nextPage: { title: 'Migration Guide', href: '/migration-guide' },
}
redux-formAn example of fully working form powered by redux-form.
```
--------------------------------
### Replace Visibility Component Usage
Source: https://github.com/semantic-org/semantic-ui-react/blob/master/docs/src/pages/MigrationGuide.mdx
Illustrates the code change required to migrate from the `Visibility` component in Semantic UI React to using the `Visibility` component from a separate package. This change is recommended due to performance improvements and the deprecation of the original component.
```diff
-import { Visibility } from "semantic-ui-react";
+import Visibility from "@semantic-ui-react/component-visibility";
```
--------------------------------
### Dropdown Animation Implementation in React
Source: https://github.com/semantic-org/semantic-ui-react/blob/master/src/modules/Dropdown/TODO.md
This snippet demonstrates the state management and logic for implementing opening and closing animations for a dropdown component. It utilizes `setTimeout` to control the sequence of class and style changes, simulating animation states like 'prep', 'start', and 'end'.
```jsx
state = {
dropdownAnimationClasses: '',
menuAnimationClasses: 'hidden',
}
open = () => {
if (this.state.isOpen) return
// animation prep
this.setState({
isOpen: true,
menuStyle: {
animationDuration: '200ms',
display: 'block !important',
},
})
// animation start
setTimeout(() => this.setState({
dropdownAnimationClasses: 'active',
menuAnimationClasses: 'visible animating slide down in',
}), 0)
// animation end
setTimeout(() => this.setState({
dropdownAnimationClasses: 'active visible',
menuAnimationClasses: 'visible',
menuStyle: {
animationDuration: null,
},
}), 200)
}
close = () => {
if (!this.state.isOpen) return
// animation prep
this.setState({
isOpen: false,
menuStyle: {
animationDuration: '200ms',
},
})
// animation start
setTimeout(() => this.setState({
dropdownAnimationClasses: 'visible',
menuAnimationClasses: 'visible animating slide down out',
}), 0)
// animation end
setTimeout(() => this.setState({
dropdownAnimationClasses: '',
menuAnimationClasses: 'hidden',
menuStyle: {
display: null,
animationDuration: null,
},
}), 200)
}
```
--------------------------------
### Update Popup offset prop
Source: https://github.com/semantic-org/semantic-ui-react/blob/master/docs/src/pages/MigrationGuideV2.mdx
The 'offset' prop for the Popup component no longer accepts string units. It now requires a tuple or a function. This change aligns with Popper.js v2.
```diff
<>
-
+
-
+ [-popper.width, 0]} />
```
--------------------------------
### Update Popup popperModifiers prop
Source: https://github.com/semantic-org/semantic-ui-react/blob/master/docs/src/pages/MigrationGuideV2.mdx
The 'popperModifiers' prop for the Popup component must now be an array. This change reflects updates in Popper.js v2's modifier format.
```diff
-
+
```
--------------------------------
### Customizing Button Icon with Function Shorthand
Source: https://github.com/semantic-org/semantic-ui-react/blob/master/docs/src/pages/ShorthandProps.mdx
This example demonstrates how to use a function as a shorthand value to customize the icon of a Semantic UI React Button. The function receives the component and its props, returning a new React Element with added properties.
```jsx