Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Provider

yarn add @clayui/core

Provider component which aggregates the main Clay, Icon, and Modal.

Stable3.85.0CHANGELOGstorybook demos

  • Example
  • Application provider
    • Theme
    • Icon spritemap
  • API

Example

import {Provider} from '@clayui/core';
<Provider spritemap={spritemap}>
	<Icon symbol="books" />
	<Icon symbol="times" />
</Provider>

Application provider

A Provider is a component that be at the root of your application. Provider is used by other Clay components to define theme scopes, render icons with spritemap, or help handle Modal creation in your application.

Theme

Themes in Clay is different from patterns that are common in other libraries, Clay's CSS framework is built using Sass and we allow to create themes based on CSS scope, a class is added in Clay components that use React.Portal to render elements in the body for example.

<Provider theme="cadmin">Content</Provider>

Icon spritemap

Icons need the path where to find the icon collection to be rendered. Clay components that use the Icon component pass props from spritemap to the icon, to avoid passing spritemap to all your components at different levels, add the spritemap path in Provider to that Icon can use and avoid passing the property on all components.

<Provider spritemap={spritemap}>
	<Icon symbol="books" />
	<Icon symbol="times" />
</Provider>

API

PropertyDescription
children
React.ReactNode
The content of the Provider.
spritemap
string
Path to the location of the spritemap resource.
storageMaxSize
number
Set the amount of items that can be cached, set to zero will be treated as infinite, be aware to set an ideal size to offer a positive experience for your user but not use a large amount of memory.

The default value is 20

How can this be improved? Create an issue!