React components for adding some fun holiday flair to any application!
npm install react-holiday-uibash
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
;
}
``