Composition

as prop

Semantic UI React provides a way to compose React components through the as prop. It allows composing component features and props without adding extra nested components.

jsx
<>
  {/* 🔨  Each Semantic UI React component has a default value for `as` prop */}
  {/* Will output: <button class='ui button' /> */}
  <Button />
  {/* Uses another tag: <a class='ui button' /> */}
  <Button as='a' />
</>

Unhandled props & DOM attributes

Our components handle only props that are defined in their propTypes, all unhandled props are passed to the component you are rendering as. It means that all HTML props are supported on all components.

jsx
// `type` is an unhandled prop on `Button` and will be passed through ⬇️
// Will output: <button class="ui button" type="submit" />
<Button type='submit' />

This is also essential for composing with third party libraries like react-router.

jsx
import { Link } from 'react-router-dom'
import { Button } from 'semantic-ui-react'

// 💡 `to` prop is not handled in `Button` and will be passed to `Link` component
;<Button as={Link} to='/home'>
  To homepage
</Button>