diff --git a/.changeset/README.md b/.changeset/README.md
new file mode 100644
index 0000000..e5b6d8d
--- /dev/null
+++ b/.changeset/README.md
@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
diff --git a/.changeset/config.json b/.changeset/config.json
new file mode 100644
index 0000000..ad6f18a
--- /dev/null
+++ b/.changeset/config.json
@@ -0,0 +1,11 @@
+{
+ "$schema": "https://unpkg.com/@changesets/config@3.1.2/schema.json",
+ "changelog": "@changesets/cli/changelog",
+ "commit": false,
+ "fixed": [],
+ "linked": [],
+ "access": "restricted",
+ "baseBranch": "main",
+ "updateInternalDependencies": "patch",
+ "ignore": []
+}
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 11023c2..0da205e 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -6,37 +6,77 @@ jobs:
steps:
- name: Begin CI...
- uses: actions/checkout@v2
+ uses: actions/checkout@v4
- - name: Use Node 12
- uses: actions/setup-node@v1
- with:
- node-version: 12.x
+ - name: Setup pnpm
+ uses: pnpm/action-setup@v4
- - name: Use cached node_modules
- uses: actions/cache@v1
+ - name: Use Node 20
+ uses: actions/setup-node@v4
with:
- path: node_modules
- key: nodeModules-${{ hashFiles('**/yarn.lock') }}
- restore-keys: |
- nodeModules-
+ node-version: 20.x
+ cache: pnpm
+
+ - name: Setup Bun
+ uses: oven-sh/setup-bun@v2
- name: Install dependencies
- run: yarn install --frozen-lockfile
+ run: pnpm install --frozen-lockfile
env:
CI: true
- name: Lint
- run: yarn lint
+ run: pnpm lint
env:
CI: true
- name: Test
- run: yarn test --ci --coverage --maxWorkers=2
+ run: pnpm test
env:
CI: true
- name: Build
- run: yarn build
+ run: pnpm build
+ env:
+ CI: true
+
+ react-compatibility:
+ runs-on: ubuntu-latest
+ strategy:
+ fail-fast: false
+ matrix:
+ react-version: [16.14.0, 17.0.2, 18.3.1, 19.0.0]
+
+ steps:
+ - name: Begin compatibility checks...
+ uses: actions/checkout@v4
+
+ - name: Setup pnpm
+ uses: pnpm/action-setup@v4
+
+ - name: Use Node 20
+ uses: actions/setup-node@v4
+ with:
+ node-version: 20.x
+ cache: pnpm
+
+ - name: Setup Bun
+ uses: oven-sh/setup-bun@v2
+
+ - name: Install dependencies
+ run: pnpm install --frozen-lockfile
+ env:
+ CI: true
+
+ - name: Test React ${{ matrix.react-version }} compatibility
+ run: pnpm add -Dw react@${{ matrix.react-version }} react-dom@${{ matrix.react-version }} --ignore-scripts
+
+ - name: Run tests
+ run: pnpm test
+ env:
+ CI: true
+
+ - name: Build with matrix React version
+ run: pnpm build
env:
CI: true
diff --git a/.gitignore b/.gitignore
index d4de8fc..f200c16 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,7 @@
*.log
.DS_Store
node_modules
+.pnpm-store
.cache
dist
+.parcel-cache
\ No newline at end of file
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 0000000..009b3f8
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1 @@
+pnpm lint
diff --git a/README.md b/README.md
index 4e59326..28b7693 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
- 
+ 
@@ -17,11 +17,13 @@
> 🌃 Animated dark mode toggle as seen in blogs!
+Supports React 16.14+ through 19.
+
## Prerequisites
-- node >=10
+- node >=20
## Installation
@@ -29,17 +31,17 @@
npm i react-toggle-dark-mode
```
-or with Yarn:
+or with pnpm:
```shell
-yarn add react-toggle-dark-mode
+pnpm add react-toggle-dark-mode
```
## Usage
```jsx
import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
import { DarkModeSwitch } from 'react-toggle-dark-mode';
const App = () => {
@@ -58,6 +60,14 @@ const App = () => {
/>
);
};
+
+const rootElement = document.getElementById('root');
+
+if (!rootElement) {
+ throw new Error('Unable to find root element');
+}
+
+createRoot(rootElement).render();
```
## API
@@ -66,15 +76,20 @@ const App = () => {
#### Props
-| Name | Type | Default Value | Description |
-| ------------------- | ---------------------------- | ------------------------------- | ----------------------------------------- |
-| onChange | \(checked: boolean\) => void | | Event that triggers when icon is clicked. |
-| checked | boolean | false | Current icon state. |
-| style | Object | | CSS properties object. |
-| size | number | 24 | SVG size. |
-| animationProperties | Object | defaultProperties \(see below\) | Override default animation properties. |
-| moonColor | string | white | Color of the moon. |
-| sunColor | string | black | Color of the sun. |
+| Name | Type | Default Value | Description |
+| ------------------- | -------------------------------------------------- | ------------------------------- | -------------------------------------------------------------------------------------------- |
+| onChange | \(checked: boolean\) => void | | Event that triggers when icon is clicked. |
+| checked | boolean | false | Current icon state. |
+| style | React.CSSProperties | | CSS properties object applied to the button wrapper. |
+| size | number \| string | 24 | SVG size. |
+| animationProperties | Partial animation properties object | defaultProperties \(see below\) | Override only the fields you want; missing fields are merged with defaults. |
+| moonColor | string | white | Color of the moon. |
+| sunColor | string | black | Color of the sun. |
+| aria-label | string | Toggle dark mode | Accessible label for the control. Ignored when `aria-labelledby` is provided. |
+| aria-labelledby | string | | Links the control to an external label element. |
+| onClick | \(event: React.MouseEvent\)=>void | | Optional button click handler. Call `event.preventDefault()` to prevent toggling on click. |
+
+All valid button attributes (except `children`) are forwarded to the underlying button element.
### Default Animation Properties
diff --git a/example/index.html b/example/index.html
index 7f8d0c4..72a8e81 100644
--- a/example/index.html
+++ b/example/index.html
@@ -9,6 +9,6 @@
-
+