# Aliases
npx likec4 generate react -o ./src/likec4.generated.js
npx likec4 gen react -o ./src/likec4.generated.js

```

:::note
Check `likec4 codegen react --help` for available options.
:::

<Aside type='tip' title="Vite plugin" >
There is also an option to use Vite plugin in library mode and get auto-updates, check this [example](/tooling/vite-plugin/#with-nextjs).
</Aside >


To use the component:

```tsx
import { LikeC4View } from './likec4.generated'

const App = () => {
  return (
    <div>
      <LikeC4View viewId="index" />
    </div>
  )
}
```

| Property            | Description                                                                                         |
| -----------------   | --------------------------------------------------------------------------------------------------- |
| `viewId`            | Typed enumeration of your views                                                                     |
| `where`             | Optional, see [filter](#filter) |
| `injectFontCss`     | Injects CSS with <a href='https://fontsource.org/fonts/ibm-plex-sans' target='_blank'>IBM Plex Sans Variable</a> font from CDN.<br/>Default is `true` |

:::tip
Check <a href="https://github.com/likec4/likec4/blob/main/packages/diagram/src/bundle/LikeC4View.props.ts#L5-L156" target="_blank">source code</a> for all properties.
:::

:::caution
`LikeC4View` does not rehydrate correctly if rendered on the server, prefer client-side.
:::

### Filter

`where` is same [view predicate](/dsl/views/predicates/#filter), but applies dynamically and enables to show/hide elements based on the context. For example:

```tsx
import { LikeC4View } from './likec4.generated'

// Keeps elements and relationships where:
// - tag is not 'legacy'
// - and 
// - tag is 'v1' or 'v2'
const App = () => {
  return (
    <div>
      <LikeC4View
        viewId="index"
        where={{
          and: [
            { tag: { neq: 'legacy' } },
            { 
              or: [
                { tag: { eq: 'v1' } },
                { tag: { eq: 'v2' } }
              ] 
            }
          ]
        }}/>
    </div>
  )
}
```

Layout stays the same, i.e. elements are not rearranged.  
Be aware, `where` applies both to elements and relationships.

## ReactLikeC4

`LikeC4View` renders views from your model, and allows exploring in the popup browser.  
Component works in most usecases, but if you need more - use `ReactLikeC4`:

```tsx
import { ReactLikeC4, type LikeC4ViewId } from './likec4.generated'

const App = () => {
  const [viewId, setViewId] = useState<LikeC4ViewId>('index')
  return (
    <ReactLikeC4
      viewId={viewId}
      pannable
      zoomable={false} 
      keepAspectRatio
      showNavigationButtons
      enableDynamicViewWalkthrough={false}
      enableElementDetails
      enableRelationshipDetails
      showDiagramTitle={false}
      onNavigateTo={setViewId}
      onNodeClick={...}
    />
  )
}
```

`ReactLikeC4` is a low-level component, giving you more control and allowing react to the events. 
Check <a href="https://github.com/likec4/likec4/blob/main/packages/diagram/src/LikeC4Diagram.props.ts" target="_blank">source code</a> for available options.

Feel free to share your ideas or ask questions in <a href="https://github.com/likec4/likec4/discussions/" target='_blank'>GitHub discussions</a>.

<Aside type='tip' title="Generic version" >
Code generation prepares component, which is already "bound" to your model.  
But it is possible to use a generic from the library:

```tsx
import { ReactLikeC4, LikeC4ModelProvider } from 'likec4/react'
import { RenderIcon, likeC4Model } from './likec4.generated'

const App = () => {
  return (
    <LikeC4ModelProvider likec4model={likeC4Model}>
      <ReactLikeC4
        viewId={"index"}
        renderIcon={RenderIcon} // Optional, used for bundled icons
        onEdgeClick={...}
      />
    </LikeC4ModelProvider>
  )
}
```

</Aside>

## Styling

<Aside type='caution' title="In progress" >
  TODO: Document styling and theming with PandaCSS
</Aside>