Spark UI, React theme
npm install @sparkui/react-themeThemeProviderThe ThemeProvider component is the contextual definition of reusable renders and all forms inside current provider
can share renderers reference by name.
tsx
export const FormRenderer = ({children}: {children: ReactNode}) => (
{
'my-submit': ({props, params}) => ()
}
}
fieldRenderers={
{
'my-input': ({props, params, errors}) => (
<>
{errors.length > 0 && Validation failed {errors}}
),
'my-checkbox': ({props, params, errors}) => (
<>
<>
{errors.length > 0 && Validation failed {errors}}
),
'my-radio-set': ({value, props, params, errors}) => (
<>
{
params.map((item: any) => (
))
}
{errors.length > 0 && Validation failed {errors}}
),
}
}
>
{children}
);
`Title text
tsx
export const TitleText = () => (
);
`Subtitle text
tsx
export const SubtitleText = () => (
);
`Label text
tsx
export const LabelText = () => (
);
`Body text
tsx
export const BodyText = () => (
);
`Error text
tsx
export const ErrorText = () => (
);
`Warning text
tsx
export const WarningText = () => (
);
`Info text
tsx
export const InfoText = () => (
);
`Primary button
tsx
export const ButtonPrimary = () => (
);
`Secondary button
tsx
export const ButtonSecondary = () => (
);
`Info button
tsx
export const ButtonInfo = () => (
);
`Error button
tsx
export const ButtonError = () => (
);
`Warning button
tsx
export const ButtonWarning = () => (
);
`Custom field
tsx
const Button = () => {
return
props={
{
props: {className: "btn btn-primary p-2", onClick: console.log},
params: {title: 'Submit'}
}
}
/>
}export const Custom = () => (
{
'my-submit': ({props, params}) => (
)
}
}
>
);
``