Usage in Components

Creating a Marmo component inside another component

Only reach for the in-component helpers when the Marmo factory itself needs a component-local value and moving it to module scope is not practical:

• useMarmo for React
• createMarmo for Solid

import ma, { useMarmo } from '@marmo/react'
 
const WorkoutDay = ({ status, compact }) => {
  const StyledDay = useMarmo(
    () =>
      ma.div.variants({
        base: `rounded border text-sm ${compact ? 'p-2' : 'p-4'}`,
        variants: {
          $status: {
            completed: 'border-green-400 bg-green-50',
            pending: 'border-yellow-400 bg-yellow-50'
          }
        }
      }),
    [compact]
  )
 
  return <StyledDay $status={status}>Workout details</StyledDay>
}

useMarmo recreates the React component when a dependency changes. createMarmo runs its Solid factory once and does not track values read inside it, so values captured by that factory should be fixed for the component's lifetime. Continue passing changing values as Marmo component props.

Prefer module-scope composition

Marmo components respond to changing props in both React and Solid. In most cases, define the Marmo component once at module scope and pass dynamic values as props. This keeps the component smaller and does not require useMarmo or createMarmo.

import ma from '@marmo/react'
 
const StyledDay = ma.div.variants({
  base: 'rounded border p-4 text-sm',
  variants: {
    $status: {
      completed: 'border-green-400 bg-green-50',
      pending: 'border-yellow-400 bg-yellow-50'
    }
  }
})
 
const WorkoutDay = ({ status }) => <StyledDay $status={status}>Workout details</StyledDay>

When status changes, Marmo recalculates the $status variant. In Solid, keep props intact and read props.status so the value remains reactive.