React as peer dep

eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

examples/typescript/src/App.css → examples/typescript/src/App.module.css

@@ -1,16 +1,15 @@
 html,
 body,
 #root {
-  height: 100%;
   margin: 0px;
 }
 
-.example-container {
-  height: 100%;
+.exampleContainer {
+  height: 100vh;
   background-color: rgb(185, 209, 253);
 }
 
-.panel-container {
+.panelContainer {
   height: 100%;
   width: 100%;
   background-color: white;
@@ -20,17 +19,15 @@ body,
   flex-direction: column;
 }
 
-button {
-  margin: 2px;
-}
-
-.form-container {
+.formContainer {
   padding: 30px;
   display: flex;
   align-items: center;
   flex-direction: column;
 }
 
-.input-container {
+.inputContainer {
   padding: 10px;
+  display: flex;
+  gap: 0.5rem;
 }

examples/typescript/src/App.tsx

@@ -1,31 +1,35 @@
 import { useState } from 'react';
 import SlidingPanel, { PanelType } from '../../../src';
-import './App.css';
-import '../../../src/index.css';
+import styles from './App.module.css';
 
 const App = () => {
   const [openPanel, setOpenPanel] = useState<boolean>(false);
   const [panelType, setPanelType] = useState<PanelType>('left');
   const [panelSize, setPanelSize] = useState<number>(30);
   const [noBackdrop, setNoBackdrop] = useState<boolean>(false);
 
+  const directions: PanelType[] = ['left', 'right', 'top', 'bottom'];
+
   return (
-    <div className="example-container">
-      <div className="form-container">
+    <div className={styles.exampleContainer}>
+      <div className={styles.formContainer}>
         <h1>React Sliding Side Panel</h1>
-        <div className="input-container">
+        <div className={styles.inputContainer}>
           <label htmlFor="width_input">
             width (in %)
             <input
               id="width_input"
               name="width_input"
-              type="number"
+              type="range"
+              max={100}
+              min={0}
               value={panelSize}
               onChange={({ target }) => setPanelSize(Number(target.value))}
             />
+            {panelSize}%
           </label>
         </div>
-        <div className="input-container">
+        <div className={styles.inputContainer}>
           <label htmlFor="no_backdrop">
             <input
               name="no_backdrop"
@@ -37,42 +41,24 @@ const App = () => {
             Hide backdrop
           </label>
         </div>
-        <div className="input-container">
-          <button
-            type="button"
-            onClick={() => {
-              setPanelType('left');
-              setOpenPanel(true);
-            }}
-          >
-            Left
-          </button>
-          <button
-            type="button"
-            onClick={() => {
-              setPanelType('right');
-              setOpenPanel(true);
-            }}
-          >
-            Right
-          </button>
-          <button
-            type="button"
-            onClick={() => {
-              setPanelType('top');
-              setOpenPanel(true);
-            }}
-          >
-            Top
-          </button>
-          <button
-            type="button"
-            onClick={() => {
-              setPanelType('bottom');
-              setOpenPanel(true);
-            }}
-          >
-            Bottom
+        <div className={styles.inputContainer}>
+          {directions.map((type) => (
+            <div key={type}>
+              <input
+                type="radio"
+                id={type}
+                name="direction"
+                value={type}
+                checked={panelType === type}
+                onChange={() => setPanelType(type)}
+              />
+              <label htmlFor={type}>{type}</label>
+            </div>
+          ))}
+        </div>
+        <div className={styles.inputContainer}>
+          <button type="button" onClick={() => setOpenPanel(true)}>
+            Open Panel
           </button>
         </div>
       </div>
@@ -81,13 +67,13 @@ const App = () => {
         isOpen={openPanel}
         backdropClicked={() => setOpenPanel(false)}
         size={panelSize}
-        panelClassName="additional-class"
+        panelClassName=""
         panelContainerClassName=""
         noBackdrop={noBackdrop}
       >
-        <div className="panel-container">
+        <div className={styles.panelContainer}>
           <div>My Panel Content</div>
-          <button type="button" className="close-button" onClick={() => setOpenPanel(false)}>
+          <button type="button" className={styles.closeButton} onClick={() => setOpenPanel(false)}>
             close
           </button>
         </div>