A expression props evaluate component generator.
You can use it in your low-code renderer or other scenes.
npm install x-props
yarn add x-props
pnpm add x-props
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"
>
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.
Props merge function. You can use it to custom merge category
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.
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 }) }}',
}}
/>
);