react-holiday-ui

react-holiday-ui

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

Install

npm install react-holiday-ui

Examples

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

Usage

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

import React, { Component } from 'react';

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

const ExampleComponent = () => {
  return <Christmas />;
};

API

react-holiday-ui exports high-level components as well as the underlying view components. For example, you can use the <Snowman /> or <Snowflakes /> components individually, or you can use the <Christmas /> 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.

1. Default ToggleButton component

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.

import React, { Component } from 'react';

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

const ExampleComponent = () => {
  return <ToggleButton className="example-class" style={{ height: '24px' }} />
};

2. useReactHolidayUI hook

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.

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 <div>
    <label htmlFor="react-holiday-ui-checkbox">Holiday UI</label>
    <input id="react-holiday-ui-checkbox" type="checkbox" checked={isActive} onChange={toggleIsActive} />
  </div >;
}

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