"Component" property

It's not really a new thing and you probably noticed it to be used in e.g. react-router. With "Component" property, the Dashboard UI Kit components are nicely composable which makes them super flexible in terms of reusability.

Usage

Most of the components accept "Component" property, e.g. UikButton. You will always find that information on the documentation page for each component or in the code. So let's have a look on some exaples. First of all, here is a usage without Component property.

import { UikButton } from 'duik'

<UikButton>This is a simple button</UikButton>


Renders: which is a simple button.

A String HTML element

Any string that is supported (or not) will be rendered, e.g. if you provide "section" as a parameter, react will render <section> in the DOM. Here is a simple example:

import { UikButton } from 'duik'

<UikButton Component="a" href="//google.com" primary>Link to google</UikButton>


The UikButton becomes <a>: Link to google

React Elements

But you don't have to stop with String elements only. You can also pass any other component that will wrap the component instead and will receive all their props. Make sure that those components accepts all the properties you are sending to it as well.

Let's have a look on exampe where we are using our UikButton with a Link component from react-router.

import { UikButton } from 'duik'
import { Link } from 'react-router-dom'

<UikButton Component={ Link } to="/docs" success>To Docs Homepage</UikButton>


The UikButton becomes <Link ...>: To Docs Homepage