open-index/open-npm huggingface dataset:
npm package: @krapi0314/tldraw
Description: Custom @tldraw/tldraw package for multiplayer
Author: krapi0314
Latest version: 1.20.5

<div style="text-align: center; transform: scale(.5);">
  <img src="https://github.com/tldraw/tldraw/raw/main/assets/card-repo.png"/>
</div>

![A screenshot of the tldraw web app](https://github.com/tldraw/tldraw/raw/main/assets/screenshot.png)

Welcome to the [tldraw](https://tldraw.com) monorepo.

🙌 Questions? Join the [Discord channel](https://discord.gg/SBBEVCA4PG) or start a [discussion](https://github.com/tldraw/tldraw/discussions/new).

💕 Love this project? Consider [becoming a sponsor](https://github.com/sponsors/steveruizok?frequency=recurring&sponsor=steveruizok).

## Contents

This repository is a monorepo containing two packages:

- [**packages/tldraw**](https://github.com/tldraw/tldraw/tree/main/packages/tldraw) contains the source for the [@tldraw/tldraw](https://www.npmjs.com/package/@tldraw/tldraw) package. This is an editor as a React component named `<Tldraw>`. You can use this package to embed the tldraw editor in any React application.
- [**packages/core**](https://github.com/tldraw/tldraw/tree/main/packages/core) contains the source for the [@tldraw/core](https://www.npmjs.com/package/@tldraw/core) package. This is a renderer for React components in a canvas-style UI. It is used by `@tldraw/tldraw` as well as several other projects.

...and three apps:

- [**apps/www**](https://github.com/tldraw/tldraw/tree/main/apps/www) contains the source for the [tldraw.com](https://tldraw.com) website.
- [**apps/vscode**](https://github.com/tldraw/tldraw/tree/main/apps/vscode) contains the source for the [tldraw VS Code extension](https://marketplace.visualstudio.com/items?itemName=tldraw-org.tldraw-vscode).
- [**apps/electron**](https://github.com/tldraw/tldraw/tree/main/apps/electron) contains the source for an experimental Electron app.

...and three examples:

- [**examples/core-example**](https://github.com/tldraw/tldraw/tree/main/examples/core-example) is a simple example for `@tldraw/core`.
- [**examples/core-example-advanced**](https://github.com/tldraw/tldraw/tree/main/examples/core-example-advanced) is a second example for `@tldraw/core`.
- [**examples/tldraw-example**](https://github.com/tldraw/tldraw/tree/main/examples/tldraw-example) is an example for `@tldraw/tldraw`.

## Discussion

Want to connect? Visit the [Discord channel](https://discord.gg/SBBEVCA4PG).

## Contribution

Interested in contributing? See the [contributing guide](/CONTRIBUTING.md).

## Support

Need help? Please [open an issue](https://github.com/tldraw/tldraw/issues/new) for support.

## License

This project is licensed under MIT.

If you're using the library in a commercial product, please consider [becoming a sponsor](https://github.com/sponsors/steveruizok?frequency=recurring&sponsor=steveruizok).

## Author

- [@steveruizok](https://twitter.com/steveruizok)
npm package: @krashnakant/next-keycloak
Description: An authentication library based on Keycloak for NextJs applications
Author: Krashna Chaurasia
Latest version: 1.0.0

# Next Keycloak

### _An authentication library based on Keycloak for NextJs applications_

Next Keycloak powered by Typescript, React and keycloak
Use it as a react provider to authenticate keycloak users

[![NPM version](https://img.shields.io/badge/npm-v2.0.0-blue)]()

## Features

- Support Keycloak public client
- Access user information and token in both client & server side

## Requirements

- [Keycloak.js](https://www.npmjs.com/package/keycloak-js) version **20** or above
- React version **17** or above
- NextJs version **13** or above

## Installation

Install package with this command

```shell
npm i @krashnakant/nextjs-keycloak
or
yarn add @krashnakant/nextjs-keycloak
```

Make a config file in `_app.tsx` or `_app.jsx` and wrap your component with **NextKeycloakAuthProvider** like this:

```shell
const config:KeycloakConfig = {
  realm: process.env.NEXT_PUBLIC_KEYCLOAK_REAM,
  url: process.env.NEXT_PUBLIC_KEYCLOAK_URL,
  clientId: process.env.NEXT_PUBLIC_KEYCLOAK_CLIENT_ID,
};

const initOption :KeycloakInitOptions = {
  onLoad: 'check-sso',
  silentCheckSsoRedirectUri:
    'http://localhost:3000/silent-check-sso.html',
}

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <NextKeycloakAuthProvider config={config} initOption={initOption}>
      <Component {...pageProps} />
     </NextKeycloakAuthProvider>
  );
}
export default MyApp;
```

Also you can provide **initialOption** based on [keycloak documentation](https://www.keycloak.org/docs/latest/securing_apps/index.html#_javascript_adapter) and pass it to the provider. Note that the above example supports "silent check sso" and needs an HTML in your public folder. Create the `silent-check-sso.html` file in the public folder and put the below content into it.

```shell
<html>
<body>
    <script>
        parent.postMessage(location.href, location.origin)
    </script>
</body>
</html>
```

And that's it... now you can use **useNextKeycloakAuth** in your pages and components like this:

```shell
const {authenticated, loading } = useNextKeycloakAuth();
```

See [this example](https://github.com/krashnakant/nextjs-keycloak/tree/main/example) for full example.

## Authors

Krashna [@krashnakant](https://github.com/krashnakant/nextjs-keycloak)

## License

MIT
npm package: @krasnoff/react-accessibility-component
Description: A React component library focused on accessibility, built with Vite and TypeScript.
Author: Your Name
Latest version: 1.0.9

# React Vite Accessibility Component

## Overview

`AccessibilityComponent` is a React component designed to enhance web accessibility by providing essential features that support users with disabilities. It is intended to be used as part of a broader strategy for making web applications accessible.

## Installation

To install the component, use npm or yarn:

```bash
npm install react-accessibility-component
```

or

```bash
yarn add react-accessibility-component
```

## Usage

Import and use the component in your React application:

```tsx
import '@krasnoff/react-accessibility-component/dist/react-accessibility-component.css';
import { AccessibilityComponent as AccessibilityComponentBase } from "@krasnoff/react-accessibility-component";

const AccessibilityComponent = AccessibilityComponentBase as React.FC<React.PropsWithChildren>;

function App() {
    // need to implement this handler to listen to the events emitted by the accessibility component
    useEffect(() => {
      const handler = (e: Event) => {
        const { message, value } = (e as CustomEvent).detail;
        console.log(message, value);
        // message can be: "OpenCloseComponent", "grayScale", "contrast",
        // "fontSizeIndex", "brightBackground", "readableFonts",
        // "markHyperlinks", "listsMark", "titlesMark"
      };
      window.addEventListener("shadow-click", handler);
      return () => window.removeEventListener("shadow-click", handler);
    }, []);

    return (
      <>
        <h1>Vite + React to NPM repository</h1>
        </AccessibilityComponent />
      </>
  )
}

export default App
```

Alternatively, you can add the following css file to the `index.html` file in your project instead of importing it in the App component:

```html
<link rel="stylesheet" href="node_modules/react-accessibility-component/dist/react-accessibility-component.css" />
```

## Important Notice

Using `AccessibilityComponent` alone does not guarantee full accessibility compliance. It is the responsibility of developers to build their web applications following the WCAG accessibility standards. This includes proper semantic HTML, keyboard navigability, sufficient color contrast, and providing alternative text for images, among other requirements.

For comprehensive guidance on making your website accessible, refer to the official [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) guidelines.

## License

This component is open-source and available under the MIT License.