DOCSEARCHbyAlgolia
Submit Docs

Tapestry React

website·Indexed 29 days ago

https://planningcenter.github.io/tapestry-react/getting-started

A React component library by Planning Center featuring a comprehensive set of UI elements including Modals, Drawers, DataTables, Popovers, and a ThemeProvider for custom styling. The library includes responsive props, variant management via VariantProvider, and specialized components like TileView, WrapView, and various Input and Select fields.

Tokens
4K
Snippets
23
Records
38
Agent score
75%

What's inside Tapestry React

  2. Use the Summary component to display a titled content block

    The Summary component is used to render a section with a title and a body of text. It is typically used to provide a high-level overview or a summary of a specific topic within a page.
    render(
  <Summary title="Tag Teams">
    Our position on Positions is you should take your pointer and position it on the Add tag button above to link some Tags.
  </Summary>
);

  3. Manage style variants with VariantProvider

    The VariantProvider component is used to toggle style variants on or off. Any prop passed to the VariantProvider is treated as a variant key; when the prop value is set to true, the corresponding variant is activated.

  4. Use the Tapestry React Textarea component

    The Textarea component is a simple wrapper around the standard HTML <textarea> element, utilizing the InputBox component for consistent styling and behavior within the Tapestry design system.

  5. Reference icons using tapestry-react icon sets

    In tapestry-react, an "icon set" is a group of product-specific icon paths. By default, all components have access to the general icon set, which contains shared icons used across multiple products. To reference a specific icon, use the following formatting convention: prefix the icon set's name, use dot notation to specify the icon, and render the icon name in camelCase.

  6. Use the token function for color overrides in @planningcenter/tapestry

    Starting with @planningcenter/tapestry version 2.3.0, you should use the token function from the @planningcenter/tapestry package for color overrides. Using the token function ensures consistent color rendering and proper support for dark mode.

  7. Implement lazy loading for components inside a Tapestry Modal

    To optimize performance and prevent rendering issues when opening a modal, use a combination of useState and useEffect to lazy-load the modal's content only after the modal has been triggered to open. This ensures that heavy components (like Input) are not mounted until the modal transition begins.
    function MyModal(props) {
  const [lazyComponent, setLazyComponent] = React.useState(null);

  React.useEffect(() => {
    if (props.open) {
      setTimeout(() => {
        setLazyComponent(<Input />);
      }, 0);
    }
  }, [props.open]);

  return (
    <Modal open={props.open}>
      {lazyComponent}
    </Modal>
  );
}

  9. Apply colors to @planningcenter/tapestry components

    Colors can be applied to components using specific color-related properties. The supported properties for color assignment include:

    • backgroundColor
    • borderColor
    • borderBottomColor
    • borderLeftColor
    • borderRightColor
    • borderTopColor
    • color
    • fill
    • stroke

  10. Create a basic navigation menu with Tapestry React

    Use the Menu component as a wrapper and Menu.Item for individual menu entries to create a standard navigation list.
    render(
  <Menu>
    <Menu.Item>Item 1</Menu.Item>
    <Menu.Item>Item 2</Menu.Item>
    <Menu.Item>Item 3</Menu.Item>
  </Menu>
);

  11. Apply responsive styles using the mediaQueries prop

    All Tapestry-React components support a mediaQueries prop. This prop allows developers to define different property values for different screen breakpoints, enabling layouts to adapt (e.g., switching from a vertical stack on small screens to a horizontal stack on larger screens). The specific breakpoints used are those defined within the ThemeProvider.
    // Example usage of mediaQueries prop
<Component 
  mediaQueries={{
    // Define prop values for specific breakpoints here
    // based on the ThemeProvider configuration
  }}
/>

  12. Use the MenuItem component in tapestry-react

    The MenuItem component is used to create individual selectable items within a menu. It must be used as a child of the Menu component. MenuItem supports highlighting and allows for the inclusion of icons and other elements within the item.