open-index/open-npm huggingface dataset:
npm package: @react-lit/menu-button
Description: An accessible dropdown menu for the common dropdown menu button design pattern.
Author: Joel Voss
Latest version: 0.7.0

# @react-lit/menu-button

An accessible dropdown menu for the common dropdown menu button design pattern.

## Installation

```bash
$ npm i @react-lit/menu-button
# or
$ yarn add @react-lit/menu-button
```

## Example

```js
import * as React from 'react';
import {
  Menu,
  MenuList,
  MenuButton,
  MenuItem,
  MenuLink,
} from "@react-lit/menu-button";

function Example() {
  return (
    <Menu>
      <MenuButton>
        Actions <span aria-hidden>▾</span>
      </MenuButton>
      <MenuList>
        <MenuItem onSelect={() => console.log("Download")}>Download</MenuItem>
        <MenuItem onSelect={() => console.log("Copy")}>Create a Copy</MenuItem>
        <MenuLink as="a" href="https://github.com/joelvoss/react-lit-menu-button">
          Go to website
        </MenuLink>
      </MenuList>
    </Menu>
  );
}
```

## Development

(1) Install dependencies

```bash
$ npm i
# or
$ yarn
```

(2) Run initial validation

```bash
$ ./Taskfile.sh validate
```

(3) Run tests in watch-mode to validate functionality.

```bash
$ ./Taskfile test -w
```

---

_This project was set up by @jvdx/core_
npm package: @react-lit/popover
Description: ## Installation
Author: Joel Voss
Latest version: 0.8.0

# @react-lit/popover

## Installation

```bash
$ npm i @react-lit/popover
# or
$ yarn add @react-lit/popover
```

## Example

```js
import * as React from 'react';
import { Popover, positionDefault } from '@react-lit/popover';

function Example() {
	const ref = React.useRef(null);
	const [value, setValue] = React.useState('');
	return (
		<div>
			<label>
				<span>Type for a special message</span>
				<input
					type="text"
					ref={ref}
					onChange={event => setValue(event.target.value)}
				/>
			</label>

			{value.length > 0 && (
				<Popover targetRef={ref} position={positionDefault}>
					<div>
						<p>Whoa! Look at me!</p>
					</div>
				</Popover>
			)}
		</div>
	);
}
```

## Available position functions

- `positionDefault` _(default)_:
  Popover is positioned with it's top left corner at the bottom left corner of
  the target element.
- `positionRight`
  Popover is positioned with it's top right corner at the bottom left corner of
  the target element.
- `positionMatchWidth`
  Popover is positioned below the target element matching it's width.
- `positionCenter`
  Popover is positioned centered below the target element.

## Development

(1) Install dependencies

```bash
$ npm i
# or
$ yarn
```

(2) Run initial validation

```bash
$ ./Taskfile.sh validate
```

(3) Run tests in watch-mode to validate functionality.

```bash
$ ./Taskfile test -w
```

---

_This project was set up by @jvdx/core_
npm package: @react-lit/portal
Description: Appends a new DOM node to the end of the `document.body` and renders it's child React tree into it. Useful to break out of the DOM hierarchy to prevent parent styles from clipping or disturbing content (e.g. popovers, dropdowns and modals).
Author: Joel Voss
Latest version: 0.7.0

# @react-lit/portal

Appends a new DOM node to the end of the `document.body` and renders it's
child React tree into it. Useful to break out of the DOM hierarchy to prevent
parent styles from clipping or disturbing content (e.g. popovers, dropdowns
and modals).

## Installation

```bash
$ npm i @react-lit/portal
# or
$ yarn add @react-lit/portal
```

## Example

```js
import * as React from 'react';
import { Portal } from "@react-lit/portal";

function Example() {
  return (
    <Portal>
      <div>I'm inside a portal!</div>
    </Portal>
  );
}
```

## Development

(1) Install dependencies

```bash
$ npm i
# or
$ yarn
```

(2) Run initial validation

```bash
$ ./Taskfile.sh validate
```

(3) Run tests in watch-mode to validate functionality.

```bash
$ ./Taskfile test -w
```

---

_This project was set up by @jvdx/core_
npm package: @react-lit/rect
Description: Provides `<Rect />` and `useRect` to measure Elements via `Element.getBoundingClientRect()`.
Author: Joel Voss
Latest version: 0.7.0

# @react-lit/rect

Provides `<Rect />` and `useRect` to measure Elements via
`Element.getBoundingClientRect()`.

## Installation

```bash
$ npm i @react-lit/rect
# or
$ yarn add @react-lit/rect
```

## Example

```js
import * as React from 'react';
import { Rect, useRect } from "@react-lit/rect";

// (1) Example using <Rect />
function RectExample() {
  return (
    <Rect>
      {({ ref, rect }) => (
        <div>
          <pre>{JSON.stringify(rect, null, 2)}</pre>
          <span
            ref={ref}
            contentEditable
            dangerouslySetInnerHTML={{
              __html: "Edit this to change the size!",
            }}
          />
        </div>
      )}
    </Rect>
  );
}

// (2) Example using useRect()
function UseRefExample() {
  const ref = React.useRef();
  const rect = useRect(ref);

  return (
    <div>
      <pre>{JSON.stringify(rect, null, 2)}</pre>
      <div
        ref={ref}
        contentEditable
        dangerouslySetInnerHTML={{
          __html: "Edit this to change the size!",
        }}
      />
    </div>
  );
}
```

## Development

(1) Install dependencies

```bash
$ npm i
# or
$ yarn
```

(2) Run initial validation

```bash
$ ./Taskfile.sh validate
```

(3) Run tests in watch-mode to validate functionality.

```bash
$ ./Taskfile test -w
```

---

_This project was set up by @jvdx/core_
npm package: @react-lit/skip-nav
Description: Renders a navigation link for screen readers and keyboard users to skip to the main content. The link is only visible if the user navigates via keyboard.
Author: Joel Voss
Latest version: 0.4.4

# @react-lit/skip-nav

Renders a navigation link for screen readers and keyboard users to skip to the
main content. The link is only visible if the user navigates via keyboard.

## Installation

```bash
$ npm i @react-lit/skip-nav
# or
$ yarn add @react-lit/skip-nav
```

## Example

```js
import * as React from 'react';
import { SkipNavLink, SkipNavContent } from "@react-lit/skip-nav";

function Example() {
  return (
    {/* Put the link at the top of your app... */}
    <SkipNavLink />
    <div>
      <SomePresentationalContent />
      {/* ...and the content next to your main content. */}
      <SkipNavContent />
      <YourMainContent />
    </div>
  );
}
```

## Development

(1) Install dependencies

```bash
$ npm i
# or
$ yarn
```

(2) Run initial validation

```bash
$ ./Taskfile.sh validate
```

(3) Run tests in watch-mode to validate functionality.

```bash
$ ./Taskfile test -w
```

---

_This project was set up by @jvdx/core_
npm package: @react-lit/tooltip
Description: When the user's mouse or focus rests on an element, a non-interactive popup is displayed near it.
Author: Joel Voss
Latest version: 0.7.0

# @react-lit/tooltip

When the user's mouse or focus rests on an element, a non-interactive popup is
displayed near it.

> **NOTE:** Touch events are currently not supported. There's not a lot of
> research or examples of these types of tooltips on mobile. Please adjust
> your interfaces on mobile to account for this.

## Installation

```bash
$ npm i @react-lit/tooltip
# or
$ yarn add @react-lit/tooltip
```

## Example

```js
import Tooltip, { useTooltip, TooltipPopup } from '@react-lit/tooltip';
import VisuallyHidden from '@react-lit/visually-hidden';

function Example() {
	return (
		<Tooltip label="Close">
			<button>
				<VisuallyHidden>Close</VisuallyHidden>
				<span aria-hidden>🔒</span>
			</button>
		</Tooltip>
	);
}
```

## Development

(1) Install dependencies

```bash
$ npm i
# or
$ yarn
```

(2) Run initial validation

```bash
$ ./Taskfile.sh validate
```

(3) Run tests in watch-mode to validate functionality.

```bash
$ ./Taskfile test -w
```

---

_This project was set up by @jvdx/core_
npm package: @react-lit/visually-hidden
Description: Render text that is announced to screen readers but visually hidden.
Author: Joel Voss
Latest version: 0.4.4

# @react-lit/visually-hidden

Render text that is announced to screen readers but visually hidden.

## Installation

```bash
$ npm i @react-lit/visually-hidden
# or
$ yarn add @react-lit/visually-hidden
```

## Example

```js
import * as React from 'react',
import { VisuallyHidden } from '@react-lit/visually-hidden';

function Example() {
  return (
    <button>
      <VisuallyHidden>Close</VisuallyHidden>
      <span aria-hidden>🔒</span>
    </button>
  )
}
```

## Development

(1) Install dependencies

```bash
$ npm i
# or
$ yarn
```

(2) Run initial validation

```bash
$ ./Taskfile.sh validate
```

(3) Run tests in watch-mode to validate functionality.

```bash
$ ./Taskfile test -w
```

---

_This project was set up by @jvdx/core_
npm package: @react-m3/m3
Description: MUI M3 Theme
Author: https://github.com/lfernando2091
Latest version: 0.0.0-pre-alpha.5

# ReactM3 Theme

> This project is an extension from the original repository created by [ZakAlbert](https://github.com/ZakAlbert)

This project has an [npm library](https://www.npmjs.com/package/@react-m3/m3) for [Material 3](https://m3.material.io/) theme, so you can add to your project and play-around this theme
created on the top of `@mui/material`.

```shell
npm i @react-m3/m3
```

## Apply this custom theme in your project

```typescript jsx
import { useMemo } from 'react';
import { CssBaseline, ThemeProvider } from '@mui/material';
import { getPalette, getTheme } from '@react-m3/m3';

const color = "#6750a4";

export const MyCustomTheme = () => {
  
  const m3Theme = useMemo(() => {
    const palette = getPalette(color);
    return getTheme('light', palette);
  }, [color]);

  return (
    <ThemeProvider theme={m3Theme}>
      <CssBaseline enableColorScheme/>
      {/* Call your app component here */}
      <MyApp/>
    </ThemeProvider>
  );
}
```

> [!NOTE]  
> Open the next [StackBlitz Example.](https://stackblitz.com/edit/react-m3-theme?file=src%2FApp.tsx)
npm package: @react-made-easy/hooks
Description: React made easy hook collection
Author: Abolhasan Ashori
Latest version: 0.0.1

# React Made Easy Hooks

React made easy hook collection

## Installation

```bash
# yarn
yarn add @react-made-easy/hooks

# npm
npm install @react-made-easy/hooks

# pnpm
pnpm install @react-made-easy/hooks
```

## License

MIT
npm package: @react-magma/file-uploader
Description: The Header pattern is a highly-opinionated, advanced component composed of smaller React Magma components. It includes options for a logo, a call to action, a search bar, and icon buttons. The Header pattern will handle the order and placement of these el
Latest version: 0.0.0-56488e
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Header

The Header pattern is a highly-opinionated, advanced component composed of smaller React Magma components. It includes options for a logo, a call to action, a search bar, and icon buttons. The Header pattern will handle the order and placement of these elements.