SpacewebProvider

When to use

• When you're setting up Spaceweb and want to supply custom config for your use case.

Usage

import * as React from 'react';

import SpacewebProvider from '@sprinklrjs/spaceweb/spacewebProvider';
import sprLight from '@sprinklrjs/spaceweb-themes/space/light';

const App = (): React.ReactElement => (
  <SpacewebProvider
    direction="ltr"
    theme={theme}
    layersZIndex={500}
    locale={{
      select: {
        noResultsMsg: 'No Results found',
        selectAllLabel: 'Select All',
      },
    }}
  >
    {/* Wrap your application in here */}
  </SpacewebProvider>
);

export default App;

Examples

When you wish to change overall theme, use theme override instead of adding overrides to individual components.

Custom ownerDocument

import { useState } from 'react';
import { createPortal } from 'react-dom';
import { Box } from '@sprinklrjs/spaceweb/box';
import SpacewebProvider from '@sprinklrjs/spaceweb/spacewebProvider';
import sprLight from '@sprinklrjs/spaceweb-themes/space/light';

const App = props => (
  <SpacewebProvider theme={sprLight} ownerDocument={props.ownerDocument}>
    <Box className="spr-support-success-text">This iframe is styled</Box>
  </SpacewebProvider>
);

const IFrame = () => {
  const [contentRef, setContentRef] = useState<HTMLIFrameElement | null>(null);
  const mountNode = contentRef?.contentWindow?.document?.body;

  return (
    <iframe title="frame" frameBorder="1" ref={setContentRef}>
      {mountNode && createPortal(<App ownerDocument={contentRef?.contentDocument} />, mountNode)}
    </iframe>
  );
};

export default IFrame;

When to use ownerDocument:

• While using Spaceweb in an iframe you'd need to pass the iframe's document as ownerDocument to SpacewebProvider in its setup.
• You can also single ownerDocument as a common host for multiple SpacewebProvider when their render trees are not overlapping.

Why ownerDocument?

• This is required specially for style & layer management.
• Styles from parent are never propagated to iframe & styletron caches its style in document head.
• All Portals, Modals & Tooltips render in a Layer which is hosted on body of document which shouldn't go outside iframe's tree.

Rendering component in Dark mode

• Wrapping a component with ThemeProvider works if your app does not use theme css variables.
• Popovers usually mounts in document.body and if your app uses css variables to apply tokens, then Popovers/modals will still use global css variables. e.g.

.PopoverBody {
  background-color: var(--spr-ui-01, black);
  /* Since, PopoverBody will be rendered in document.body,
     --spr-ui-01 will resolve to global theme's ui-01 token */
}

• To avoid this, you can change mountNode of all layers with LayersManager. Check the example below.

API

SpacewebProvider props

You can check the implementation of the component for more details.

SpacewebProvider exports

You can import this module like so:

import SpacewebProvider from 'spaceweb/spacewebProvider'