react-holiday-ui

> React components for adding some fun holiday flair to any application!

 

Install

``bash
npm install react-holiday-ui
`

Examples

See examples at https://ericdudley.github.io/react-holiday-ui

!screenshot

Usage

1. Important the holiday component you want to use.
2. Make sure to import the react-holiday-ui/dist/index.css file.

`tsx
import React, { Component } from 'react';

import { Christmas } from 'react-holiday-ui';
import 'react-holiday-ui/dist/index.css';

const ExampleComponent = () => {
return ;
};
`

API

react-holiday-ui exports high-level components as well as the underlying view components. For example, you can use the or components individually, or you can use the component which renders them both.

| Holiday | Components|
| --- | --- |
| Christmas| Snowman, Snowflakes, Christmas |

Toggling

In order to allow users to toggle the holiday UI on and off, you can leverage the following options.



> Note: All of the options below persist the toggle state to local storage, so if a user toggles the UI off and refreshes the page, it will still be toggled off.

$3

The ToggleButton component is a default HTML button that can be styled via the styles or className props. It renders 'On' and 'Off' and will toggle the holiday UI.
> Note: This component can be used anywhere in your application and does not require any specific component hierarchy.
`tsx
import React, { Component } from 'react';

import { ToggleButton } from 'react-holiday-ui';
import 'react-holiday-ui/dist/index.css';

const ExampleComponent = () => {
return
};
`

$3

The useReactHolidayUI hook returns an object containing isActive, toggleIsActive, and setIsActive that can be used to build a custom toggle component that better fits into your existing UI.
> Note: This hook can be called from anywhere in your application and does not require any specific component hierarchy.
`tsx
import React, { Component } from 'react';

import { useReactHolidayUI } from 'react-holiday-ui';
import 'react-holiday-ui/dist/index.css';

const CustomToggle = () => {
const { isActive, toggleIsActive } = useReactHolidayUI();
return

Holiday UI

;
}
``

Planned features

| Feature| Status| Notes | Last Updated|
| --- | --- | --- | --- |
| More holidays! | In-progress | Currently, only Christmas is supported, but more holidays are to come! | 2021-12-15|
| AutoHoliday | Planned | This component will automatically render the correct holiday UI based on the current date. Waiting till there's more holidays. | 2021-12-15

License

MIT © ericdudley