open-index/open-npm huggingface dataset:
npm package: @masa-dev/react-signage
Description: This is a react library for signage.
Author: masa-dev
Latest version: 3.5.10

# React Signage

This is a react library for signage.

- Auto slide image and video with cross fade.
- Can toggle fullscreen.
- Preloader to cache to browser (optional)
- If the browser does not support the Fullscreen API, use a pseudo fullscreen display.

See the [demo site](https://mohhh-ok.github.io/react-signage/) for example.

## Support browser

This library supports Chrome.

## Install

```
npm i @masa-dev/react-signage
```

## Minimum usage

```tsx
import { Signage } from '@masa-dev/react-signage'
import { useState } from 'react'

export default function App() {
    const [play, setPlay] = useState(false)
    const [fullScreen, setFullScreen] = useState(false)

    const items: SignageItem[] = [
        {
            type: 'image',
            src: '/img1.jpg',
            second: 3,
        },
        {
            type: 'video',
            src: '/video1.mp4'
        }]

    return <>

        <p>Use buttons to get user interaction for playing videos.</p>
        <button onClick={() => setPlay(!play)}>{play ? 'Stop' : 'Play'}</button>
        <button onClick={() => setFullScreen(!fullScreen)}>
            {
                fullScreen
                    ? 'Inline'
                    : document.fullscreenEnabled ? 'FullScreen' : 'Pseudo FullScreen'
            }
        </button>

        <p>Component. If not fullscreen, slideshow is shown below.
         To use IndexedDB cache, set 'useDbCache' parameter.
        </p>
        <Signage
            play={play}
            fullScreen={fullScreen}
            items={items}
            useDbCache={true}
        />

        <p>Preloader (Optional, but recommended for Safari). Preload media files into IndexedDB.</p>
        <Cacher
            items={cacheItems}
            renderProgress={({ progress, queue }) => <div>
                {progress
                    ? <>
                        loading...
                        {Math.round(progress.progress * 100)}%
                        <br />
                        {progress.src}
                    </>
                    : 'done'
                }
            </div>}
        />
    </>
}
```

## License

MIT
npm package: @masa-dev/react-tiny-translator
Description: A tiny translator for React
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# React Tiny Translator

This is a simple translator for react.

## Install

```
npm i @masa-dev/react-tiny-translator
```

## Usage

Initialize instance.

```tsx
// translator.ts

import { TinyTranslator } from '@masa-dev/react-tiny-translator/utils';

const locales = ['en', 'ja'];
const defaultLocale = 'en';

export const translator = new TinyTranslator(locales, defaultLocale);
```

Use translator with data.

```tsx
// Page.tsx

import { useTranslator } from '@masa-dev/react-tiny-translator';
import { translator } from './translator';

const tData = translator.generate({
    title: {
        en: 'My Page',
        ja: 'マイページ'
    },
    description: {
        en: "This is {{name}}'s page.",
        ja: 'これは{{name}}のページです。'
    }
});

export function Page() {
    const t = useTranslator(tData);
    return <div>
        <h1>{t('title')}</h1>
        <p>{t('description', { name: 'John' })}</p>
    </div>
}
```

Set provider on root.

```tsx
// App.tsx

import { TranslatorProvider } from '@masa-dev/react-tiny-translator';
import { useState } from 'react';
import { Page } from './Page';

export default function App() {
    const [locale, setLocale] = useState('en');

    return <TranslatorProvider locale={locale} setLocale={setLocale}>
        <Page />
    </TranslatorProvider>
}
```

You can also create locale change component.

```tsx
// LocaleSelect.tsx

import { useLocale } from '@masa-dev/react-tiny-translator';

export function LocaleSelect() {
    const { locale, setLocale } = useLocale();
    
    return <select value={locale} onChange={e => setLocale(e.target.value)}>
        <option value='en'>English</option>
        <option value='ja'>Japanese</option>
    </select>
}
```

## Provider

This library has one provider, and two hooks.

Provider: TranslatorProvider

hooks: useTranslator, useLocale
npm package: @masa-dev/shukujitsu
Description: API Key不要でGoogle Calendarから日本の祝日を取得するライブラリ
Latest version: 0.4.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shukujitsu

日本の祝日をGoogle Calendarから取得します。

CORS制限のため、ブラウザでは使用できません。

## Install

```
npm i @masa-dev/shukujitsu
```

## Usage

```typescript
import { Shukujitsu } from 'shukujitsu';

async function main(){
    
    // インスタンスを作成
    const shukujitsu = new Shukujitsu();

    // 祝日データを取得
    await shukujitsu.retrieve();

    // 取得をチェック
    if (!shukujitsu.isRetrieved()) return;

    // 特定の日付が祝日かどうかを確認
    const isShukujitsu = shukujitsu.isShukujitsu({
        year: 2024,
        month: 1,
        day: 1,
    }); // true (元日)

    // 特定の日の祝日情報を取得
    const shukujitsuOnJanuaryFirst = shukujitsu.find({
        year: 2024,
        month: 1,
        day: 1,
    }); // { date: '2024-01-01', name: '元日' }

    // 特定の月の祝日を取得
    const shukujitsuInJanuary = shukujitsu.filterByMonth(2024, 1);

    // 特定の年の祝日を取得
    const shukujitsuIn2024 = shukujitsu.filterByYear(2024);
}
```

## License

MIT