StyleProp

A StyleProp is a property of a shape that follows some special rules.

1. The same value can be set on lots of shapes at the same time.

2. The last used value is automatically saved and applied to new shapes.

For example, DefaultColorStyle is a style prop used by tldraw's default shapes to set their color. If you try selecting several shapes on tldraw.com and changing their color, you'll see that the color is applied to all of them. Then, if you draw a new shape, it'll have the same color as the one you just set.

You can use styles in your own shapes by either defining your own (see StyleProp.define and StyleProp.defineEnum) or using tldraw's default ones, like DefaultColorStyle. When you define a shape, pass a props object describing all of your shape's properties, using StyleProps for the ones you want to be styles. See the custom styles example for more.

class StyleProp<Type> implements T.Validatable<Type> {}

Properties

defaultValue: Type

readonly id: string

readonly type: T.Validatable<Type>

Methods

Define a new StyleProp.

static define<Type>(
  uniqueId: string,
  options: {
    defaultValue: Type
    type?: T.Validatable<Type>
  }
): StyleProp<Type>

Example

import { StyleProp } from '@tldraw/tlschema'
import { T } from '@tldraw/validate'

const MyLineWidthProp = StyleProp.define('myApp:lineWidth', {
  defaultValue: 1,
  type: T.number,
})

Parameters

string

{
  defaultValue: Type
  type?: T.Validatable<Type>
}

Returns

StyleProp<Type>

Define a new StyleProp as a list of possible values.

static defineEnum<const Values extends readonly unknown[]>(
  uniqueId: string,
  options: {
    defaultValue: Values[number]
    values: Values
  }
): EnumStyleProp<Values[number]>

Example

import { StyleProp } from '@tldraw/tlschema'

const MySizeProp = StyleProp.defineEnum('myApp:size', {
  defaultValue: 'medium',
  values: ['small', 'medium', 'large'],
})

Parameters

string

{
  defaultValue: Values[number]
  values: Values
}

Returns

EnumStyleProp<Values[number]>

setDefaultValue(value: Type): void

Parameters

Type

Returns

void

validate(value: unknown): Type

Parameters

unknown

Returns

Type

validateUsingKnownGoodVersion(prevValue: Type, newValue: unknown): Type

Parameters

Type

unknown

Returns

Type