BaseField Edit

This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

BaseField is an internal (i.e., not exported in the index.js) primitive component used for building more complex fields like TextField. It provides error handling and focus styles for field components. It does not handle layout of the component aside from wrapping the field in a Flex wrapper.

Usage

BaseField is primarily used as a hook rather than a component:

function useExampleField( props ) {
    const { 
        as = 'input',
        ...baseProps,
    } = useBaseField( props );

    const inputProps = {
        as,
        // more cool stuff here
    }

    return { inputProps, ...baseProps };
}

function ExampleField( props, forwardRef ) {
    const {
        preFix,
        affix,
        disabled,
        inputProps,
        ...baseProps
    } = useExampleField( props );

    return (
        <View { ...baseProps } disabled={ disabled }>
            {preFix}
            <View
                autocomplete="off"
                { ...inputProps }
                disabled={ disabled }
            />
            {affix}
        </View>
    );
}

Top ↑

Props

Top ↑

hasError: boolean

Renders an error style around the component.

Top ↑

disabled: boolean

Whether the field is disabled.

Top ↑

isInline: boolean

Renders a component that can be inlined in some text.

Top ↑

isSubtle: boolean

Renders a subtle variant of the component.