Themed Components

@deity/falcon-ui UI components such as Box, Text etc are all built as themeable components.

This means they will accept props such as m for margin, and values from the theme such as xxs for spacing.

client/src/components/myComponent.js

<Box py="xs">
Content here
</Box>

To make your custom component 'themeable' you will need to use the themed function.

client/src/components/myComponent.js

import { Box, themed } from '@deity/falcon-ui';
const MyComponentLayout = themed({
tag: Box,
defaultTheme: {
myComponentLayout: {
py: 'xs'
}
}
});
<MyComponentLayout>
Content here
</MyComponentLayout>

You will notice that we have suffixed the names with layout. This is a helpful convention to easily recognize when a component is a themed layout.

Changing the html element of a component

If you want to change the html element of a themed component it's as simple as passing a prop (as).

client/src/components/myComponent.js

<Box as="section">
Content here
</Box>

This will render a <section> tag rather than a <div>.

Ask the community. #help

If you can't find what you're looking for, the answer might be on our community slack channel. Our team keep a close eye on this and will usually get back to you within a few hours, if not straight away. If you haven't created an account yet please sign up here slack.deity.io.