@sparkui/react-theme v1.0.16

React Theme

ThemeProvider

The ThemeProvider component is the contextual definition of reusable renders and all forms inside current provider can share renderers reference by name.

Example

export const FormRenderer = ({children}: {children: ReactNode}) => (
  <ThemeProvider
    submitRenderers={
      {
        'my-submit': ({props, params}) => (<button className="btn btn-primary" {...props}>{params}</button>)
      }
    }
    fieldRenderers={
      {
        'my-input': ({props, params, errors}) => (
          <>
            <input className="form-control" {...params} {...props} />
            {errors.length > 0 && <span className="alert alert-danger my-2">Validation failed {errors}</span>}
          </>
        ),
        'my-checkbox': ({props, params, errors}) => (
          <>
            <>
              <input id="new" className="form-check-input" {...params.input} {...props}/>
              <label htmlFor="new">{...params.label}</label>
            </>
            {errors.length > 0 && <span className="alert alert-danger my-2">Validation failed {errors}</span>}
          </>
        ),
        'my-radio-set': ({value, props, params, errors}) => (
          <>
            {
              params.map((item: any) => (
                <div key={item.key}>
                  <input {...props} id={item.key} value={item.key} checked={value === item.key} className="form-check-input" />
                  <label htmlFor={item.key}>{item.label}</label>
                </div>
              ))
            }
            {errors.length > 0 && <span className="alert alert-danger my-2">Validation failed {errors}</span>}
          </>
        ),
      }
    }
  >
    {children}
  </ThemeProvider>
);

Title text

export const TitleText = () => (
  <ThemeProvider>
    <TitleText text="Title Text"/>
  </ThemeProvider>
);

Subtitle text

export const SubtitleText = () => (
  <ThemeProvider>
    <SubtitleText text="Subtitle Text"/>
  </ThemeProvider>
);

Label text

export const LabelText = () => (
  <ThemeProvider>
    <LabelText text="Label Text"/>
  </ThemeProvider>
);

Body text

export const BodyText = () => (
  <ThemeProvider>
    <Text text="Body Text"/>
  </ThemeProvider>
);

Error text

export const ErrorText = () => (
  <ThemeProvider>
    <ErrorText text="Error Text"/>
  </ThemeProvider>
);

Warning text

export const WarningText = () => (
  <ThemeProvider>
    <WarningText text="Warning Text"/>
  </ThemeProvider>
);

Info text

export const InfoText = () => (
  <ThemeProvider>
    <InfoText text="Info Text"/>
  </ThemeProvider>
);

Primary button

export const ButtonPrimary = () => (
  <ThemeProvider>
    <PrimaryButton onClick={console.log} text="Primary Text"/>
  </ThemeProvider>
);

Secondary button

export const ButtonSecondary = () => (
  <ThemeProvider>
    <SecondaryButton onClick={console.log} text="Secondary Text"/>
  </ThemeProvider>
);

Info button

export const ButtonInfo = () => (
  <ThemeProvider>
    <InfoButton onClick={console.log} text="Info Text"/>
  </ThemeProvider>
);

Error button

export const ButtonError = () => (
  <ThemeProvider>
    <ErrorButton onClick={console.log} text="Error Text"/>
  </ThemeProvider>
);

Warning button

export const ButtonWarning = () => (
  <ThemeProvider>
    <WarningButton onClick={console.log} text="Warning Text"/>
  </ThemeProvider>
);

Custom field

const Button = () => {
  return <Renderer
    name='my-submit'
    props={
      {
        props: {className: "btn btn-primary p-2", onClick: console.log},
        params: {title: 'Submit'}
      }
    }
  />
}

export const Custom = () => (
  <ThemeProvider
    renderers={
      {
        'my-submit': ({props, params}) => (
          <button {...props}>{params.title}</button>
        )
      }
    }
  >
    <Button />
  </ThemeProvider>
);