Stack Overflow
Stack Overflow

Questions tagged [semantic-ui-react]

Semantic-UI-React is the official React integration for Semantic UI

Semantic-UI-React is the official React integration for Semantic UI.

Current version: Semantic UI React (version v0.81.1 as of 2018-06-04)

  • jQuery Free
  • Declarative API
  • Augmentation
  • Shorthand Props
  • Sub Components
  • Auto Controlled State
874 questions
9
votes
1 answer

How to pass a React component as a prop

I'm using react-semantic-ui Modal object. The object that opens the modal is a prop. Text otherProp=... > I want to embed Modal in another component: export default class Confirm extends…
znat
  • 13,144
  • 17
  • 71
  • 106
8
votes
1 answer

How to do Dynamic images in ReactJS?

In my system I have a few images that a user can have presented and it's extremely advantageous to me to be able to just pass in an id and then have that image be presented to the user. (One use case: Articles in the system have images associated…
J. Doe
  • 83
  • 1
  • 1
  • 5
8
votes
1 answer

Inline popup/tooltip at React Semantic UI

I'm following an example from official documentation to create a simple Popup: https://react.semantic-ui.com/modules/popup So here is my current code which works very well: export default (state, methods) => { const { trigger, handleTooltipOpen,…
Vytalyi
  • 1,637
  • 3
  • 20
  • 33
8
votes
4 answers

React Semantic UI - position icon to the left of text in Menu Item

Using React Semantic UI the default look is this This is the code (from the website) which produces that component. import React, { Component } from 'react' import { Icon, Menu } from 'semantic-ui-react' export default class…
crinklywrappr
  • 588
  • 5
  • 18
8
votes
3 answers

In Semantic-UI-React, is there a way to add an x icon to a text input or dropdown that will clear the text when clicked?

I have both a text input and a dropdown that allows additions (both use the Form.xxx version). For both of these, I would like to add an x icon on the right, that when clicked, will either call a handler or will clear the input's value. Is this…
mdebeus
  • 1,928
  • 3
  • 18
  • 27
8
votes
2 answers

Semantic react ui Popup close button

I'm using semantic-react-ui's Popup component and I was wondering how to trigger close popup event by clicking a button inside the popup without using jquery. Thank you
riyoz
  • 431
  • 1
  • 6
  • 15
8
votes
1 answer

semantic-ui-react not working for

I am using semantic-ui react to render a table of data. My requirement is that when the page is on mobile view, I hide certain columns. I tried using className="mobile hidden" on the Table.Cell element but this doesn't seem to work at all. Then I…
rex
  • 3,133
  • 6
  • 35
  • 62
8
votes
3 answers

Creating a sticky bar in Semantic UI (React). Page jumps when scrolling

I'm using the component in semantic to create a top menu + breadcrumb header. For some reason, the scroll bar "jumps" when trying to scroll from the topmost position Sandbox https://codesandbox.io/s/y7k3zn5qn1 I haven't provided the context prop to…
PrashanD
  • 2,643
  • 4
  • 28
  • 58
8
votes
3 answers

semantic-ui-react webpack size is 1.74M?

I find common vendor for my project is very big. I'm tring to see which module is responsible for the big size, and found semantic-ui-react is taking 1.74M by itself. react-vendor.js 1.74 MB 2 [emitted] [big] …
eugene
  • 39,839
  • 68
  • 255
  • 489
7
votes
2 answers

How do I use enter to submit the Semantic React Search

I'm trying to set up my search so when I click enter it will begin to search and redirect to the search page. I was looking through the documentation and it wasn't clear how to set this up. How can I set up pressing enter to begin the search? I'm…
Alex Erling
  • 307
  • 4
  • 19
7
votes
1 answer

Jest snapshots not working with some Semantic-UI-React components

When I try to create a Jest snapshot of my React component 'LoadingModal', which contains a Semantic-UI-React 'Modal' component, the snapshot ends up empty, with 'null' inside the .snap file. I've tested taking snapshots of other Semantic-UI-React…
Roman Scher
  • 1,162
  • 2
  • 14
  • 18
7
votes
2 answers

Unable to make the Checkbox work with redux-form and react-semantic-ui

I'm trying to use redux-form with react-semantic-ui and is having trouble with the Checkbox component. The Checkbox is not being checked. I've followed the example from the redux-form documentation, but no luck. Here's the Code snippet…
Tushar Khatiwada
  • 2,019
  • 2
  • 20
  • 32
7
votes
2 answers

How to use Semantic UI's theming in Semantic UI React?

There are detailed instructions on theming on the traditional Semantic UI, but the equivalent section is missing from the Semantic UI React site. Does that mean that it doesn't support theming or can you possibly use the traditional Semantic UI's…
Larry Maccherone
  • 9,393
  • 3
  • 27
  • 43
7
votes
3 answers

How to close semantic ui modal in another react component?

In my main component I can open a modal by clicking on an icon. The content of the modal is a separate component, which is calling a method. If the method call is successful, I want to close the modal. But how can I do this? Main component class…
user3142695
  • 15,844
  • 47
  • 176
  • 332
6
votes
2 answers

Allow only number in Semantic UI React Form Input

I have created a currency input React component to allow the user to enter numeric values. I made the input type to "number". This only works in Chrome (user can still enter non-numeric values in Firefox). CurrencyInput Component: import React…
Joshua
  • 2,275
  • 7
  • 41
  • 57
1 2
3
…
58 59