npmpackage.info

Gathering detailed insights and metrics for @fluentui-contrib/react-themeless-provider

@fluentui-contrib/react-themeless-provider - 0.1.1 | npmpackage.info

@fluentui-contrib/react-themeless-provider

Monorepo for contributor extension packages to Fluent UI

0.1.1

MIT

TypeScript

39.03 kB

Installations

npm install @fluentui-contrib/react-themeless-provider

Developer Guide

BETA

Typescript

No

Module System

CommonJS, ESM

Node Version

20.19.0

NPM Version

10.8.2 Pull Requests

Open

25

Total

379

Closed

72

Merged

282

Issues

Open

26

Total

49

Closed

23

Releases

Unable to fetch releases

Languages

TypeScript

JavaScript

CSS

MDX

HTML

TypeScript (96.02%)

JavaScript (2.33%)

CSS (1.19%)

MDX (0.25%)

HTML (0.21%)

Developer

microsoft

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

44 Stars

397 Commits

45 Forks

15 Watchers

27 Branches

85 Contributors

Updated on Jul 02, 2025

Maintainers

View All 85 Contributors

Package Meta Information

Latest Version

0.1.1

Package Id

@fluentui-contrib/react-themeless-provider@0.1.1

Unpacked Size

39.03 kB

Size

7.47 kB

File Count

NPM Version

10.8.2

Node Version

20.19.0

Published on

Apr 10, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@swc/helpers @fluentui/react-jsx-runtime @griffel/react

Peer Dependencies

@types/react @types/react-dom react react-dom @fluentui/react-components @fluentui/react-icons @fluentui/react-shared-contexts

@fluentui-contrib/react-themeless-provider

This package provides ThemelessFluentProvider, a replacement for FluentProvider when the provider needs to be rendered inside shadow DOM.

ThemelessFluentProvider does not render the theme contexts or inject theme CSS custom properties into the DOM. When using this provider you are responsible for setting the necessary CSS custom properties in such a way that they will pierce the shadow DOM (e.g., apply them to :root).

Install

1yarn add @fluentui-contrib/react-themeless-provider
2# or
3npm install @fluentui-contrib/react-themeless-provider

Usage

1import * as React from 'react';
2import { root } from '@fluentui-contrib/react-shadow';
3import { ThemelessFluentProvider } from '@fluentui-contrib/react-themeless-provider';
4import { createCSSRuleFromTheme, webLightTheme, Button } from '@fluentui/react-components';
5
6export function App() {
7  React.useEffect(() => {
8    // Example of how to create a style that will piece the shadow DOM.
9    // This does not need to be created by React and can be created
10    // by a host Web Component application for example.
11    const cssRule = createCSSRuleFromTheme(':root', webLightTheme);
12    const style = document.createElement('style');
13    document.head.appendChild(style);
14    style.sheet.insertRule(cssRule);
15
16    return () => {
17      document.head.removeChild(style);
18    }
19  }, []);
20
21  return (
22    {/* renders a shadow root */}
23    <root.div>
24     <ThemelessFluentProvider>
25        <Button>A themed Fluent React Button in shadow DOM</Button>
26      </ThemelessFluentProvider>
27    </root.div>
28  );
29}

No vulnerabilities found.

No security vulnerabilities found.