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
6
votes
2 answers

Formik and Semanic UI React. Delay on typing, unnecessary validation

Here is a simple example of my dynamic form.
Andrii Fedorenko
  • 153
  • 2
  • 11
6
votes
3 answers

How to center a Modal in Semantic-UI-React?

I am new to the Semantic-UI-React framework, and recently ran across a problem that I can't seem to fix. I have a Log in & Sign up Modal on my home page. When the LogIn And Sign Up button is triggered, the Modal pops up. However, I cannot get it to…
6
votes
2 answers

Need ref to from semantic-ui-react's Form.Input - which is surrounded by divs in React

I am using semantic-ui-react's Form.Input, which wraps the input in two divs. This means, is rendered as follows:
mdebeus
  • 1,928
  • 3
  • 18
  • 27
6
votes
1 answer

How to blur the input provided in semantic-ui-react?

With mouse click everything works, but I want it to work with keyboard I want input to be unfocused/blurred when I press downKey while sitting in the input component. This is my input component import { Input } from 'semantic-ui-react';
Sabbiu Shah
  • 1,569
  • 3
  • 16
  • 28
6
votes
1 answer

Checkbox label with URL link in Semantic UI React

Semantic UI React Checkbox can be used like this: import React from 'react' import { Checkbox } from 'semantic-ui-react' const TermsOfServiceCheckbox = () => ( ) export default…
user2962393
  • 1,083
  • 9
  • 12
6
votes
1 answer

Semantic UI Vertical Align Icon and Menu

I am currently trying to align a Icon and a text in a Menu.Item with Semantic UI React V.0.68.2. Currently my HTML output looks like this:
grahan
  • 2,148
  • 5
  • 29
  • 43
6
votes
1 answer

Semantic-UI-React, selection, multi, can't set defaultValue

I have React component: So options and defaultOptions is the same…
Sarkis Arutiunian
  • 1,281
  • 3
  • 17
  • 34
5
votes
4 answers

How to define setFieldValue in React

I'm using Formik for validating the fields before creating an entity. There is a Select which opens a dropdown and the user must choose one option from there. I get an error saying that setFieldValue is not defined but where I've researched before I…
Leo Messi
  • 5,157
  • 14
  • 63
  • 125
5
votes
2 answers

TS2604: JSX element type 'Header' does not have any construct or call signature

I am using semantic-ui-react in my react app with typescript and it is giving error. The project uses PnPify. TS2604: JSX element type 'Header' does not have any construct or call signatures. I am very new to typescript and don't know how to…
SUMIT NIHALANI
  • 387
  • 1
  • 10
5
votes
4 answers

How to use multiple or two state values in one component or class file in react JS?

I am trying to use state to hide Semantic-UI Model form also to pass JSON to Customer class to add new customer. I am able to pass the value but in the end there is only one value. When I start typing name, in console panel on 1st character name…
Rahul Waghmare
  • 125
  • 1
  • 2
  • 9
5
votes
4 answers

How to display json data in a reactjs component

I'm new to react. I dont know how to import json data in one of my component. This is my json data: [ { "id": 1, "firstname": "abc", "lastname": "xyz", "phone": "+91 789654123", "email":…
Sanjana
  • 286
  • 2
  • 7
  • 20
5
votes
1 answer

Custom Loader does not get applied with respect to react-table

I am trying to over ride the default loader provided by react-table with the Spinner provided by the semantic-ui-react . But this does not seem like working. I have maintained three components; one is the App, one for Data Grid and the other for the…
joy08
  • 9,004
  • 8
  • 38
  • 73
5
votes
1 answer

React Semantic-UI: Modal component with Form component? Is it possible?

So, I'm trying to use Semantic UI modal component with the form component. My problem is that if I use these two together the UI becomes bad. I created a sandbox about my current situation: https://codesandbox.io/s/2n1pj96ry As you can see now the…
user6046794
5
votes
1 answer

Grid OR Flexboox? if using react-semantic-ui

Currently I am laying down the base of my webpage (which is mobile first also), I have an argument. I have added react-semantic-ui in my react project. Added is my targetted layout. Now what should I use to plot this, Grid Or Flexbox ? Should I…
Nikhil
  • 417
  • 1
  • 6
  • 16
5
votes
2 answers

Using font awesome pro with semantic-ui

I just purchased FA-pro, and I tough semantic had a way to use it, but it is nowhere documented. Any way to use Font awesome pro with semantic-ui ? (I'm using SUI React, but I already did an Icon wrapper to directly use SUI).
Nevosis
  • 1,366
  • 1
  • 16
  • 27