Skip to main content

Creating Project Components with Styling System

This guide explains how to create custom components in projects that use the styling system, highlighting the differences from base library components.

Key Differences​

When creating components in the project (instead of the library), there are some important differences:

  • Use of ICSS instead of StyledProp
  • Registration in the project's StyleRegistry
  • Typing with StyledComponent from the library

Basic Component Structure​

Implementation Pattern​

import React from 'react'
import { View } from '@/components'
import { useStylesFor } from '@codeleap/mobile'
import { StyledComponent } from '@codeleap/styles'
import { StyleSheets, StyleRegistry } from '@/app'

export type ComponentProps = {}

export const Component: StyledComponent<typeof StyleSheets.ComponentStyles, ComponentProps> = (props) => {
  const {
    style,
    ...rest
  } = props

  const styles = useStylesFor(Component.styleRegistryName, style)

  return (
    <View {...rest} style={styles.wrapper} />
  )
}

Component.styleRegistryName = 'Component'
Component.elements = ['wrapper']
StyleRegistry.registerComponent(Component)

Key Creation Differences​

1. Typing​

  • Library: StyledProp<ComponentComposition>
  • Project: ICSS

2. Registry​

  • Library: MobileStyleRegistry.registerComponent
  • Project: StyleRegistry.registerComponent

3. Typed Component​

  • Library: Manual withVariantTypes
  • Project: StyledComponent<typeof StyleSheets.ComponentStyles, Props>

This pattern allows creating components fully integrated with the project's styling system, maintaining flexibility and reusability while benefiting from the robust theming system.

Stylesheet​

In the component's stylesheet file, you need to declare the typing of its composition, for example:

import { createStyles } from '@codeleap/styles'
import { StyleRegistry } from '../styles'

export type ComponentComposition = 'wrapper'

const createComponentVariant = createStyles<ComponentComposition>

export const ComponentStyles = {
  default: createComponentVariant(theme => ({
    wrapper: {
      width: '100%',
    },
    innerWrapper: {
      ...theme.presets.flex,
    },
  })),
}

StyleRegistry.registerVariants('Component', ComponentStyles)