How to use Semantic UI modules in React?

Question

I can't seem to make semantic ui work inside React component. JQuery is working properly. But semantic accordion doesn't respond to click event.

import React, { Component } from 'react'
import 'semantic-ui/dist/semantic.min.css'

import $ from 'jquery'
import jQuery  from 'jquery'
window.jQuery = jQuery
import 'semantic-ui/dist/semantic.min.js'

export default class App extends Component{
  render(){
    return(
      <div>
        <h1>Hello, React!</h1>
          <div className="ui slider checkbox">
            <input type="checkbox" name="newsletter" />
            <label>Accept terms and conditions</label>
          </div>
          <div className="ui styled accordion">
  <div className="active title">
    <i className="dropdown icon"></i>
    What is a dog?
  </div>
  <div className="active content">
    <p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
  </div>
  <div className="title">
    <i className="dropdown icon"></i>
    What kinds of dogs are there?
  </div>
  <div className="content">
    <p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
  </div>
  <div className="title">
    <i className="dropdown icon"></i>
    How do you acquire a dog?
  </div>
  <div className="content">
    <p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
    <p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
  </div>
</div>

      </div>
    )
  }
}

Is semantic-ui a node module? Or a file? If it is a file you need to make you import look like: import './path/to/file/filename'; — Davin Tryon
– Davin Tryon, Commented Jun 30, 2016 at 8:44
@DavinTryon It's a node module.. The CSS and JS files load perfectly, but for unknown reason js file cannot find JQuery. It says "uncaught reference: jquery" — Mihir
– Mihir, Commented Jun 30, 2016 at 8:46

levithomason · Accepted Answer · 2017-01-28 19:27:29Z

6

Author of Semantic-UI-React here. Don't use jQuery in any React app. React maintains a virtual representation of the DOM that must be kept in perfect sync with the real DOM. In a React app, only React should manipulate the DOM. JQuery is a DOM manipulation Library. Using jQuery in a React app will break React.

This is why I wrote Semantic-UI-React: http://react.semantic-ui.com/introduction#jquery-free

https://github.com/Semantic-Org/Semantic-UI-React

answered Jan 28, 2017 at 19:27

levithomason

3002 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

QoP · Accepted Answer · 2016-06-30 11:02:49Z

4

One way to include semantic-ui correctly in your project is

1º Install semantic-ui from npm

npm install semantic-ui-css --save

2º Import it after jquery. You have to use require, import would throw "uncaught reference: jquery"

window.$ = window.jQuery = require('jquery')
require('semantic-ui-css/semantic')

3º In your example, initialize the accordion after the component has been mounted

componentDidMount(){
    $('.ui.accordion') // You can use a ref here
      .accordion()
    ;
}

Your example working

edited Jun 30, 2016 at 11:02

answered Jun 30, 2016 at 10:34

QoP

28.5k16 gold badges78 silver badges77 bronze badges

4 Comments

I Stand With Israel Over a year ago

See this comment stackoverflow.com/a/41913908/8997882. The author of Semantic-UI-React says not to use jQuery with it.

QoP Over a year ago

@MBak when this answer was written, Semantic-UI-React didn't exist & it was not possible to use semantic ui without jQuery.

I Stand With Israel Over a year ago

Interesting. I'm pretty new to React so I did not know that.

I Stand With Israel Over a year ago

I'm actually still struggling to get my Semantic UI React dropdown to work. Looks like only the 'simple' (non JS) version works. Do you know how to resolve this? I feel like I need to initialize it, but then the above answer says not to use jQuery.

kenneth_mervin01 · Accepted Answer · 2017-07-10 05:49:40Z

0

I've just created a React Boiler Plate with Semantic Ui React. I put some intructions in README.md. Hope this will help https://github.com/kennethmervin01/react-with-semantic

answered Jul 10, 2017 at 5:49

kenneth_mervin01

662 bronze badges

Collectives™ on Stack Overflow

How to use Semantic UI modules in React?

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related