x-props

A expression props evaluate component generator.

You can use it in your low-code renderer or other scenes.

Install

npm install x-props
yarn add x-props
pnpm add x-props

Usage

import { xProps } from 'x-props';

const XYourComp = xProps()(YourComp);

<XYourComp
  x-props={{
    className: '{{ $props["data-classname"] }}',
  }}
  data-classname="x-props-comp"
/>

// render to:
<YourComp
  className="x-props-comp"
  data-classname="x-props-comp"
>

Options

engine

Engine is used to analysis and excute expression. x-props use built-in {{ }} template syntax and new Function to analysis and excute expression. If you have more security needs, you can use your own engine.

propsMerge

Props merge function. You can use it to custom merge category

useXValue

Custom context value provider hooks, return a object which will be used by engine. By default, it only pass component raw props (expect x-props prop) as $props object.

Add custom avaliable value

If you want add component self's state and other value in your component, use useXValue option.

const XInput = xProps({
  useXValue: (props) => {
    const [state, setState] = React.useState({});
    // other your react hooks
    return {
      $props: props,
      $state: {
        value: state,
        set: setState,
      },
    };
  },
})('input');

Now you can access $state in your expression string:

const result = render(
  <XInput
    x-props={{
      className: '{{ $state.value.className }}',
      onChange: '{{ (e) => $state.set({ className: e.target.value }) }}',
    }}
  />
);