@rnw-community/object-field-tree v0.77.0

Object field tree

Utility for generating complex nested objects with data generation callback and full TypeScript support with IDE autocompletion.

combine((...keys) => data, ...objects)

Real world usage examples: @rnw-community/fast-style

Example

Typescript enum and object usage example

You need to understand how TS converts enums into JS.

import { combine } from '@rnw-community/object-field-tree';
import { View } from 'react-native';

import { WidgetStyles } from './widget.styles';

enum ScienceEnum {
    'Mathematics' = 'Mathematics Science',
    'Physics' = 'Physics Science',
    'Chemistry' = 'Chemistry Science',
}

const complexityObject = {
    Easy: 'Easy',
    Medium: 'Medium',
    Hard: 'Hard',
};

const tree = combine(
    (science, complexity) => ({
        science: ScienceEnum[science],
        complexity: complexityObject[complexity],
        complexData: `${science}_${complexity}`,
    }),
    ScienceEnum,
    complexityObject
);

console.log(tree.Physics.Hard);
console.log(tree.Chemistry.Easy);

Generating components example

With this approach you can create a strictly configurable building framework of Components for your project with very easy usage and IDE autocompletion.

import { combine } from '@rnw-community/object-field-tree';
import { View } from 'react-native';

import { WidgetStyles } from './widget.styles';

enum WidgetHeightEnum {
    'Small' = 'Small',
    'Medium' = 'Medium',
}

const widgetWidthMap = {
    Third: WidgetStyles.thrirdWidth,
    TwoThirds: WidgetStyles.twoThrirdsWidth,
    Full: WidgetStyles.fullWidth,
};

const widgetHeightStyleMap = {
    [WidgetHeightEnum.Small]: WidgetStyles.smallHeight,
    [WidgetHeightEnum.Medium]: WidgetStyles.MediumHeight,
};

export const Widget = combine(
    (height, width) => props => <View {...props} style={[widgetHeightStyleMap[height], widgetWidthMap[width]]} />,
    WidgetHeightEnum,
    widgetWidthMap
);

// Widget usage
const Component = () => (
    <Widget.Small.Full>
        <View>
            <Text>Hello!</Text>
        </View>
    </Widget.Small.Full>
);

License

This library is licensed under The MIT License.