@bento/internal-props

InternalProps

The @bento/internal-props package provides internal utilities and components used across the Bento project to bypass restrictions, filtering of props, or triggering of data-override props within the Bento ecosystem. This package is strictly for internal use by @bento-based components or those who use Bento to create design system components.

⚠️ Warning: This package is not intended for public consumption and is subject to change without notice. It should only be used by internal Bento components or design system implementations.

Installation

To install the package, use your preferred package manager:

npm install @bento/internal-props

API

The package exports two main functions:

useInternalProps

Extracts internal properties from a set of properties by removing the specified prefix.

import { useInternalProps } from '@bento/internal-props';

const [props, internal] = useInternalProps({
  '$$bento-internal-1-foo': 'bar',
  '$$bento-internal-1-baz': 'qux',
  regular: 'prop'
});

console.log(props);   // { regular: 'prop' }
console.log(internal); // { foo: 'bar', baz: 'qux' }

The function accepts two arguments:

• props: The properties to extract from
• prefix: (Optional) The prefix to remove from the properties. Defaults to $$bento-internal-{major}-

toInternalProps

Converts a set of properties to internal properties by prefixing them with the specified namespace.

import { toInternalProps } from '@bento/internal-props';

const internal = toInternalProps({
  foo: 'bar',
  baz: 'qux'
});

console.log(internal); // { '$$bento-internal-1-foo': 'bar', '$$bento-internal-1-baz': 'qux' }

The function accepts two arguments:

• props: The properties to convert
• prefix: (Optional) The prefix to use for the internal properties. Defaults to $$bento-internal-{major}-

Example

<Source language='tsx' code={ SourceDemo } />