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
847 questions
33
votes
2 answers

Semantic UI (React): How to use Link components in Menu.List elements

I'm trying to get a semantic ui (react) menu list, which should be working with react router, which means I would like to use the Link component of react router If I use this... My…
user3142695
  • 11,619
  • 29
  • 119
  • 238
19
votes
9 answers

Form Validation with Semantic-UI-React

I am using the official Semantic UI React components to create a web application. I have a form on my sign up page, which contains an email field, a password field, and a confirm password field. import {Component} from 'react'; import {Button, Form,…
TFischer
  • 1,150
  • 2
  • 18
  • 39
17
votes
6 answers

Warning: Prop `className` did not match. when using styled components with semantic-ui-react

I use this code to margin my Button from top: const makeTopMargin = (elem) => { return styled(elem)` && { margin-top: 1em !important; } `; } const MarginButton = makeTopMargin(Button); and whenever i use…
Talha Talip Açıkgöz
  • 992
  • 2
  • 10
  • 26
17
votes
4 answers

How to use onChange method in semantic react dropdown

Can someone help me out how to use onChange in dropdown (Semantic UI React). I am reading the docs, but still, I don't get it. It does have onChange props. onChange(event: SyntheticEvent, data: object) How do I use it? Like, I have method…
Ankur Sharma
  • 345
  • 1
  • 5
  • 20
15
votes
4 answers

semantic ui react Setting dropdown value to state

how to have dropdowns selected value in state.here is my code iam getting value for name field but dropdown not working, can anyone find out what i am missing? MyComponent.js import React,{Component} from 'react'; class MyComponent extends…
Srikanth Gowda
  • 4,057
  • 5
  • 15
  • 29
15
votes
2 answers

semantic ui react default selected options in dropdown

I want default selected options in my dropdown. The code below works when I add selected options but does not render with default selected options: render() { return (
…
user2456977
  • 3,292
  • 10
  • 41
  • 77
15
votes
1 answer

What are "as" props in semantic-ui-react components?

as is defined as An element type to render as (string or function). in the most of the components in semantic-UI-react. What does that mean? My understanding is that it somehow changes the component in whatever is as is. Example:…
kirill_igum
  • 3,703
  • 5
  • 37
  • 68
13
votes
1 answer

Closing React Semantic UI modal with button and close icon

I have a Modal where the user needs to fill in some forms and save whatever was filled in through a button in the Modal. When the user saves I would like the modal to close. I can get this done, through using the open prop on the Modal component.…
theJuls
  • 4,644
  • 5
  • 41
  • 90
13
votes
1 answer

Responsive Semantic UI React Grid, Columns, Rows

I'm having trouble making Semantic UI React grid fully responsive, at least respond the way I want for Desktop, Tablet and Mobile. I have following three components which I am rendering in Grid Columns. import React,{ Component } from…
Generaldeep
  • 377
  • 1
  • 7
  • 28
12
votes
3 answers

Overriding styles in semantic ui react

I'm using Semantic UI React and trying to figure the best way to override default styles, so that I can change the appearance of cards and the overall theme. Option 1 seems to be to define my CSS and put !important after every rule, which is not…
FrobberOfBits
  • 16,264
  • 2
  • 45
  • 75
12
votes
1 answer

Reactjs - Adding ref to input in dynamic element render

I'm trying to focus/highlight input text onClick in React. It works as expected, but only on the last element in the rendered array. I've tried several different methods but they all do the exact same thing. Here are two examples of what I…
merrilj
  • 327
  • 1
  • 2
  • 10
12
votes
5 answers

How to set Semantic UI Dropdown size to match buttons, etc

Semantic UI has a great way to apply common sizing to a lot of things, e.g. a button (in Semantic UI React):
Dan
  • 762
  • 9
  • 22
11
votes
1 answer

Converting Object Promise to String in Javascript

I'm working with React, Next.Js, semantic-ui-react and Solidity. It is my goal to print out the users address (from MetaMask) and a ProjectTitle (set by User) as meta infomation for a semantic-ui-react card. To print out the address in the 'header'…
Saensation
  • 251
  • 1
  • 2
  • 7
10
votes
5 answers

Semantic-UI React: How to theme using less variables in a create-react-app project

I am using Semantic-UI in my create-react-app project. I am using a custom theme to modify individual components using ThemeProvider, which is working well. However I am trying to figure out how to modify the less variables as described in the…
Zumo
  • 422
  • 3
  • 12
9
votes
1 answer

Semantic-ui-react - Table Cell Colspan

How to merge few cells in semantic-ui-react as we normally do using colspan in html table? https://react.semantic-ui.com/collections/table#types-pagination I tried different options - nothing seems to help!!
KitKarson
  • 3,802
  • 7
  • 36
  • 63
1
2 3
…
56 57