ehscan-react-components 0.1.41 → 0.1.43

package/README.md

@@ -15,43 +15,41 @@ AddBox is a React component for managing a list of entries. It allows users to a
 
 The component is fully controlled — the parent manages the state and receives updates via the onChange callback.
 
-![AddBox Example](./src/images/AddBox.png)
+![AddBox Preview](https://raw.githubusercontent.com/beeplaced/ehscan-react-components/main/src/images/AddBox.png)
+
 
 ### Implementation
 
-```tsx
-    import { useEffect, useState } from "react";
-    import { AddBox, useChangeAddBox } from "ehscan-react-components";
+```jsx
+import { useEffect, useState } from "react";
+import { AddBox, useChangeAddBox } from 'ehscan-react-components';
 
-    const Elements = () => {
+const Elements = () => {
 
     const [inValue, setInValue] = useState({
-        add: [
-        { id: 0, title: "first Entry" },
-        { id: 1, title: "second Entry" },
-        { id: 2, title: "last Entry" }
-        ]
-    });
-
-    // Log changes whenever entries are updated
-    useEffect(() => {
-        console.log(inValue); 
-    }, [inValue]);
-
-    // Scoped change function for the "add" key
-    const changeAddBox = useChangeAddBox(inValue, setInValue, "add");
-
-    return (
-        <div className="element-wrapper">
-        <AddBox 
-            value={inValue.add} 
-            onChange={(value, id) => changeAddBox(value, id)} 
-        />
-        </div>
-    );
-    }
-
-    export default Elements;
+    add: [
+      { id: 0, title: "first Entry" },
+      { id: 1, title: "second Entry" },
+      { id: 2, title: "last Entry" }
+    ]
+  });
+
+  useEffect(() => {
+    console.log(inValue); //use ValueChanges on save
+  },[inValue])
+
+  const changeAddBox = useChangeAddBox(inValue, setInValue, "add"); //change on specific tag
+
+  return (
+    <>
+      <div className="element-wrapper"> {/* ✏️ Put custom styling overrides here */}
+      <AddBox title="Element-Title" value={inValue.add} onChange={(value, id) => changeAddBox(value, id)} />
+      </div>
+    </>
+  );
+}
+
+export default Elements;
 ```
 
 ### Styling

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ehscan-react-components",
-  "version": "0.1.41",
+  "version": "0.1.43",
   "description": "components",
   "main": "dist/Components.js",
   "types": "dist/Components.d.ts",