Class MutableProps<StaticProps, ChangeableProps>

A class for managing mutable properties that can change based on window size (responsive design). This allows certain properties to update dynamically when the window is resized or in response to manual changes.

Example

interface IStatic {
static: string;
}

interface IChangeable {
changeable: string;
}

const props = new MutableProps<IStatic, IChangeable>({
static: '',
changeable: 'something',
});

props.addResponsiveProps({
breakpoint: 'viewport_phone',
settings: {
changeable: 'phone',
},
});

props.changeProps({ changeable: 'changed' });

Type Parameters

  • StaticProps extends Record<string, any>

  • ChangeableProps extends Record<string, any>

Hierarchy

  • MutableProps

Constructors

Accessors

Methods

Constructors

  • Initializes the MutableProps instance with static and changeable properties, and sets up a mutation callback to be called when properties change.

    Type Parameters

    • StaticProps extends Record<string, any>

    • ChangeableProps extends Record<string, any>

    Parameters

    • initProps: StaticProps & ChangeableProps

      Initial properties, including both static and changeable properties.

    • _onMutate: (() => void) = ...

      Callback function triggered whenever the properties change.

        • (): void
        • Returns void

    • _name: string = 'Responsive Props'

      The name used to identify the set of responsive properties.

    Returns MutableProps<StaticProps, ChangeableProps>

Accessors

  • get props(): StaticProps & ChangeableProps
  • Retrieves the current properties. These may change either due to responsive rules or through manual updates.

    Returns StaticProps & ChangeableProps

Methods

  • Adds responsive rules that define how the properties should change based on viewport breakpoints.

    Parameters

    • rules: IResponsive<ChangeableProps>

      Responsive rules specifying breakpoints and corresponding property settings.

    Returns void

  • Manually changes the properties. The updated properties persist and trigger the mutation callback.

    Parameters

    • props: Partial<ChangeableProps>

      A partial set of changeable properties to be updated.

    Returns void