addComponent
function addComponent<TComponent>( component, transformProps?, predicate?): CustomComponentEntry<TComponent>Helper-function for adding custom components with a props transform function.
The function ensures proper typing for the props parameter of the transform / predicate functions
Type Parameters
Section titled “Type Parameters”TComponent
Section titled “TComponent”TComponent extends Component<any, {
}, string> = Component<any, {
}, string>
Parameters
Section titled “Parameters”component
Section titled “component”TComponent
Custom component
transformProps?
Section titled “transformProps?”CustomComponentPropsTransformFn<TComponent>
Function modifying props passed to component
predicate?
Section titled “predicate?”CustomComponentPredicate<TComponent>
Function returning boolean value. If false, use default component.
Returns
Section titled “Returns”CustomComponentEntry<TComponent>
Example
Section titled “Example”<script lang="ts"> import {Inspect, addComponent} from 'svelte-inspect-value'; import CustomNumber from './CustomNumber.svelte'; import CustomString from './CustomString.svelte';</script>
<Inspect value={1234} customComponents={{ number: addComponent( CustomNumber, // props here is properly typed with props of CustomNumber (props) => ({ value: Math.floor(props.value) }) // third parameter is a predicate function that decides if custom component should be used // if false is returned, the default component will be used instead for this type (props) => props.value < 1000 ), // custom component without props transform function or predicate string: [CustomString] }}/>