react-holiday-ui v1.0.3

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.

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.
```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 <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

License

MIT © ericdudley