how to use as={Menu} component class?

[jiangts]

In an example at https://react.semantic-ui.com/modules/sidebar/#states-visible there's a snippet like this:

import React from 'react'
import { Header, Icon, Image, Menu, Segment, Sidebar } from 'semantic-ui-react'

const SidebarExampleVisible = () => (
  <Sidebar.Pushable as={Segment}>
    <Sidebar as={Menu} animation='overlay' icon='labeled' inverted vertical visible width='thin'>
      <Menu.Item as='a'>
        <Icon name='home' />
        Home
      </Menu.Item>
      <Menu.Item as='a'>
        <Icon name='gamepad' />
        Games
      </Menu.Item>
      <Menu.Item as='a'>
        <Icon name='camera' />
        Channels
      </Menu.Item>
    </Sidebar>

    <Sidebar.Pusher>
      <Segment basic>
        <Header as='h3'>Application Content</Header>
        <Image src='/images/wireframe/paragraph.png' />
      </Segment>
    </Sidebar.Pusher>
  </Sidebar.Pushable>
)

export default SidebarExampleVisible

How do I translate as={Segment} or as={Menu}?

[jiangts]

ok after reading your source I came up with just doing
:as (.-Menu js/semanticUIReact) but that's a little nasty.

I tried (r/reactify-component sa/Menu) but that didn't work...

According to http://reagent-project.github.io/docs/master/InteropWithReact.html
adapt-react-class and reactify-component aren't completely symmetrical.

What do you think about exporting a version of all the SUI components suffixed by "original" or suffixed by "Raw"? e.g. sa/MenuOriginal

[gadfly361]

Here is an issue showing how I implemented a sidebar, but it essentially uses the nasty trick you mentioned.

There is probably room to wrap that in soda-ash or to better document it ... I don't have a strong feeling either way yet.