Conditional

Conditional Content renders different content based on specified conditions. This allows for dynamic content that changes based on user state, preferences, or other variables.

Schema Configuration

Sanity Schema

// In your feature descriptor
import { ConditionalDescriptor } from '@vyuh/sanity-schema-system';

export const myFeature = new FeatureDescriptor({
  name: 'myFeature',
  title: 'My Feature',

  contents: [
    new ConditionalDescriptor({
      // Define which content types can be used in conditions
      items: [
        { type: 'vyuh.card' },
        { type: 'vyuh.group' },
        { type: 'vyuh.portableText' },
      ],
    }),
  ],

  // Define custom conditions
  conditions: [
    myCustomCondition,
  ],
});

Content Structure

// Conditional Content object structure
interface ConditionalContent {
  _type: 'vyuh.conditional';
  condition: {
    _type: 'vyuh.condition';
    configuration: {
      _type: string;
      // Condition-specific properties
    };
  };
  cases: {
    value: string;
    item: ContentItem;
  }[];
  defaultCase?: string;
}

Note

When adding custom layouts to a content block, always make sure to include them in the corresponding descriptor’s layouts property as shown in the schema configuration example above.

Tip

You can create custom conditions based on user authentication, time of day, user preferences, or any other variable in your application.

Extensibility

Schema Descriptors

The ConditionalDescriptor in the schema system provides the following extensibility points:

• items: Define which content types can be used in conditional cases

Additionally, at the feature level:

• conditions: Register custom condition types that can be used for decision logic

// Schema-side descriptor
new ConditionalDescriptor({
  items: [{ type: 'vyuh.card' }, { type: 'vyuh.portableText' }]
})

// Feature-level conditions registration
new FeatureDescriptor({
  conditions: [timeOfDayCondition, userRoleCondition]
})

React Descriptors

In the React system, conditional content is configured using the ConditionalContentDescriptor:

// React-side registration
import { ConditionalContentDescriptor } from '@vyuh/react-feature-system';
import { ContentExtensionDescriptor } from '@vyuh/react-extension-content';
import { FeatureDescriptor } from '@vyuh/react-core';

new FeatureDescriptor({
  name: 'myFeature',
  extensions: [
    new ContentExtensionDescriptor({
      contents: [
        new ConditionalContentDescriptor(),
      ],
      conditions: [
        BooleanCondition.typeDescriptor,
        TimeOfDayCondition.typeDescriptor,
      ],
    }),
  ],
});