Interface LibraryVariantComponent

Represents a component element from a library in Penpot. This interface extends LibraryElement and includes properties specific to component elements.

interface LibraryVariantComponent {
    instance(): Shape;
    mainInstance(): Shape;
    isVariant(): boolean;
    transformInVariant(): void;
    variants: null | Variants;
    variantProps: {
        [property: string]: string;
    };
    variantError: string;
    addVariant(): void;
    setVariantProperty(pos: number, value: string): void;
    id: string;
    libraryId: string;
    name: string;
    path: string;
    getPluginData(key: string): string;
    setPluginData(key: string, value: string): void;
    getPluginDataKeys(): string[];
    getSharedPluginData(namespace: string, key: string): string;
    setSharedPluginData(namespace: string, key: string, value: string): void;
    getSharedPluginDataKeys(namespace: string): string[];
}

Hierarchy (view full)

Properties

variants variantProps variantError id libraryId name path

Methods

instance mainInstance isVariant transformInVariant addVariant setVariantProperty getPluginData setPluginData getPluginDataKeys getSharedPluginData setSharedPluginData getSharedPluginDataKeys

Properties

Readonlyvariants

variants: null | Variants

Access to the Variant interface, for attributes and actions over the full Variant (not only this VariantComponent)

ReadonlyvariantProps

variantProps: {
    [property: string]: string;
}

A list of the variants props of this VariantComponent. Each property have a key and a value

variantError

variantError: string

If this VariantComponent has an invalid name, that does't follow the structure [property]=[value], [property]=[value] this field stores that invalid name

Readonlyid

id: string

The unique identifier of the library element.

ReadonlylibraryId

libraryId: string

The unique identifier of the library to which the element belongs.

name

name: string

The name of the library element.

path

path: string

The path of the library element.

Methods

instance

  • instance(): Shape

  • Creates an instance of the component.

    Returns Shape

    Returns a Shape object representing the instance of the component.

    Example

    const componentInstance = libraryComponent.instance();

mainInstance

isVariant

transformInVariant

  • transformInVariant(): void

  • Creates a new Variant from this standard Component. It creates a VariantContainer, transform this Component into a VariantComponent, duplicates it, and creates a set of properties based on the component name and path. Similar to doing it with the contextual menu or the shortcut on the Penpot interface

    Returns void

addVariant

  • addVariant(): void

  • Creates a duplicate of the current VariantComponent on its Variant

    Returns void

setVariantProperty

  • setVariantProperty(pos, value): void

  • Sets the value of the variant property on the indicated position

    Parameters

    • pos: number
    • value: string

    Returns void

getPluginData

  • getPluginData(key): string

  • Retrieves the data for our own plugin, given a specific key.

    Parameters

    • key: string

      The key for which to retrieve the data.

    Returns string

    Returns the data associated with the key as a string.

    Example

    const data = shape.getPluginData('exampleKey');
    console.log(data);

setPluginData

  • setPluginData(key, value): void

  • Sets the plugin-specific data for the given key.

    Parameters

    • key: string

      The key for which to set the data.

    • value: string

      The data to set for the key.

    Returns void

    Example

    shape.setPluginData('exampleKey', 'exampleValue');

getPluginDataKeys

  • getPluginDataKeys(): string[]

  • Retrieves all the keys for the plugin-specific data.

    Returns string[]

    Returns an array of strings representing all the keys.

    Example

    const keys = shape.getPluginDataKeys();
    console.log(keys);

getSharedPluginData

  • getSharedPluginData(namespace, key): string

  • If we know the namespace of an external plugin, this is the way to get their data.

    Parameters

    • namespace: string

      The namespace for the shared data.

    • key: string

      The key for which to retrieve the data.

    Returns string

    Returns the shared data associated with the key as a string.

    Example

    const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');
    console.log(sharedData);

setSharedPluginData

  • setSharedPluginData(namespace, key, value): void

  • Sets the shared plugin-specific data for the given namespace and key.

    Parameters

    • namespace: string

      The namespace for the shared data.

    • key: string

      The key for which to set the data.

    • value: string

      The data to set for the key.

    Returns void

    Example

    shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');

getSharedPluginDataKeys

  • getSharedPluginDataKeys(namespace): string[]

  • Retrieves all the keys for the shared plugin-specific data in the given namespace.

    Parameters

    • namespace: string

      The namespace for the shared data.

    Returns string[]

    Returns an array of strings representing all the keys in the namespace.

    Example

    const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');
    console.log(sharedKeys);

Settings

Member Visibility

On This Page

Properties
Methods