WARNING Alpha, missing components, documentation, tests and functionality
This package makes it easy to use the excellent Semantic-UI css framework in React. It is heavily borrowed/inspired by react-semantify, but with some tweaks and additions. Having a meteor package was also a lot more convenient than messing around with browserify.
Note! You need to bring your own semantic-ui files, as they are not included.
Table of Contents generated with DocToc
In a Meteor app directory, enter:
$ meteor add hubroedu:semantic-react
General guidelies for components:
- Components are named after their semantic-ui equivalent.
ui segmentis<Segment>andui progressis<Progress>. Some modules have exceptions. - Most variations of components should have a separate prop for that variation, like
size="large",color="blue"ordisabled={true}. This makes it easier to programmatically change the compoent. You can place this in the className prop if you want though. - Modules are initialized by default. On a
<Progress>component, the jquery initializer.progress()will be called. - If it can be grouped, it has a group component. Example being
<Buttons>
<Button>Action</Button>
<Button>Another action</Button>
</Buttons>and
<Cards>
<Card>...</Card>
<Card>...</Card>
</Cards>The aim of this project is to make the components as intuitive as possible. Most components work the same way, and if they don't, open an issue!
Refer to Semantic UI docs for a complete reference to all variations of components.
<Input name="username" placeholder="Username here" label="Username" />
<Input id="my-age" name="age" type="number" min="1" max="110" step="1" label="Your age" />
<Input name="about" type="textarea" rows="10" label="About you" />Renders to:
<label for="input_username">Username</label>
<input id="input_username" type="text" name="username" placeholder="Username here" />
<label for="my-age">Your age</label>
<input id="my-age" type="number" name="age" min="1" max="110" step="1" />
<label for="input_about">About you</label>
<textarea id="input_about" name="about" rows="10" />You can add buttons, icons and labels to the input.
<Input name="search" className="left icon action" placeholder="Search term">
<Icon icon="search" />
<Button>Search</Button>
</Input>Common props:
- type: text/textarea/number (range is a separate component)
- name: The built in name property of the input
- id: The id property will be added automatically if not specified, generated as "input_" + name
- label: Adds a label to the input
- placeholder: Placeholder text for text/textarea
- onChange: Hooks to the onChange handler, takes a callback function with three arguments:
- name: The name prop
- value: New value
- event: Synthetic event
Textarea props:
- rows: Number of rows in a textarea input
Number props:
- min
- max
- step
<Flag flag="no" />Renders to
<i class="flag no"></i>Props:
- flag: Language code of flag
<Icon icon="star" />Renders to
<i class="star icon"></i>Props:
- icon: Name of the font awesome icon
- size: Size variation
- loading: Is loading boolean
- disabled: Disabled boolean
<Steps>
<Step completed={true}> Step 1 </Step>
<Step active={true}> Step 2 </Step>
<Step disabled={true}> Step 3 </Step>
<Step disabled={true}> Step 4 </Step>
</Steps>Renders to
<div class="ui steps">
<div class="step completed" > Step 1 </div>
<div class="step active"> Step 2 </div>
<div class="step disabled"> Step 3 </div>
<div class="step disabled"> Step 4 </div>
</divb>This component will additionally make sure that silly submits cause a refresh, so all propagation is stopped. Get access to the submit event by adding a onSubmit prop with your handle function.
<Form>
...
</Form>Renders to
<form class="ui form">
...
</form><Grid>
<Column>
</Column>
<Column>
</Column>
</Grid>Renders to
<div class="ui grid">
<div class="column"></div>
<div class="column"></div>
</div><Table>
...
</Table>Renders to
<table class="ui table">
...
</table><Menu>
...
</Menu>Renders to
<div class="ui menu">
...
</div><Cards>
<Card>
</Card>
<Card>
</Card>
</Cards>Renders to
<div class="ui cards">
<div class="card">
</div>
<div class="card">
</div>
</div><Items>
<Item>
</Item>
<Item>
</Item>
</Items>Renders to
<div class="ui items">
<div class="item">
</div>
<div class="item">
</div>
</div>This particular element has a bit of extra functionality.
<Statistic value={3} label="Label" />Renders to
<div class="ui statistic">
<div class="value">3</div>
<div class="label">Label</div>
</div><Statistic value={3} formatter={x => x * 2} label="Label" labelAbove="above" />Renders to
<div class="ui statistic">
<div class="label">Above</div>
<div class="value">6</div>
<div class="label">Label</div>
</div>Modules are initialized by default, which is the same as passing the prop init={true}. To avoid initialization, pass false instead.
To configure a module, pass the configuration object to init.
<Accordion className="styled fluid">
<Title>
Tab 1
</Title>
<Content>
Tab 1 content
</Content>
<Title>
Tab 2
</Title>
<Content>
Tab 2 content
</Content>
<Title>
Tab 3
</Title>
<Content>
Tab 3 content
</Content>
<Title>
Tab 4
</Title>
<Content>
Tab 4 content
</Content>
</Accordion>or if you have dynamic content
<Accordion>
{puppies.map(puppy => {
return [
<Title key={puppy.name}>
<Icon icon="paw" className="right floated" />
<Icon icon="dropdown" />
{puppy.name}
</Title>,
<Content key={puppy.name + "content"}>
<PuppyDetails puppy={puppy} />
</Content>
];
})}
</Accordion><Checkbox
onChange={this.handleChange}
className="toggle"
checked={true}
name="kittens"
label="Kittens" />Renders to
<div class="ui toggle checkbox checked" color="null">
<input type="checkbox" name="kittens" tabindex="0" class="hidden">
<label>Kittens</label>
</div>We have implemented a separate component for this variant of Checkbox. It constsists of a RadioGroup, with several RadioInput elements.
<RadioGroup name="fruit" defaultValue="banana" onChange={this.fruitHandler}>
<RadioInput value="banana" label="Banana" />
<RadioInput value="apple" label="Apple" />
<RadioInput value="pear" label="Pear" />
</RadioGroup>Renders to
<div class="field">
<div class="field">
<div class="ui radio checkbox checked">
<input type="radio" class="hidden" value="banana" name="fruit" tabindex="0">
<label data-radio-name="fruit">
Banana
</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" class="hidden" value="apple" name="fruit" tabindex="0">
<label data-radio-name="fruit">
Apple
</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" class="hidden" value="pear" name="fruit" tabindex="0">
<label data-radio-name="fruit">
Pear
</label>
</div>
</div>
</div><Dropdown
name="name"
label="Label"
onChange={(newValue, name, element) => console.log(newValue)}
default="Choose category"
defaultValue="no"
options={[
{ value: "no", name: "Norwegian"},
{ value: "en": name: "English" }
]}
/>Renders to
<div name="language" default="" class="ui link item pointing dropdown " tabindex="0">
<input type="hidden" name="language" value="no">
<i class="dropdown icon"></i>
<div class="text">
Norwegian
</div>
<div class="menu" tabindex="-1">
<div class="item active selected" data-value="no">
Norwegian
</div>
<div class="item" data-value="en">
English
</div>
</div>
</div><Progress
label="Hello"
total={100}
value={50} />Renders to
<div class="ui progress">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Hello</div>
</div>Tabs have been given some extra functionality. It is now divided into three components, Tab, TabContent and TabMenu. The TabMenu contains the Tabs, and handles the clicking and showing of TabContent.
<TabMenu className="secondary pointing tabular top attached">
<Tab tab="marketplace" active={true}>Marketplace</Tab>
<Tab tab="caravans">Caravans</Tab>
<Tab tab="trading">Trading</Tab>
<Tab tab="connected-markets">Connected markets</Tab>
</TabMenu>
<TabContent tab="marketplace" active={true}>
.... something
</TabContent>
<TabContent tab="caravans">
.... something else
</TabContent>