@devekene001/super-input 0.0.5 → 0.0.6

package/README.md

@@ -39,46 +39,67 @@ Option 2: Handling Objects (The Pro Way)
 Manage multiple inputs with a single state object. This uses the name prop to identify which field is changing.
 
 JavaScript
-import React, { useState } from 'react';
-import SuperInput from '@devekene001/super-input';
+import React, { useState } from "react";
+import SuperInput from "@devekene001/super-input";
+import './App.css';
 
-function ProfileForm() {
-  const [user, setUser] = useState({
+function App() {
+  // 1. Setup an object to hold all our data
+  const [formData, setFormData] = useState({
     firstName: '',
     lastName: '',
     email: ''
   });
 
-  // One function to handle all inputs!
-  const handleChange = (value, name) => {
-    setUser(prev => ({
+  // 2. The "Universal" handler
+  // Our SuperInput now sends (value, name)
+  const handleInputChange = (value, name) => {
+    setFormData(prev => ({
       ...prev,
-      [name]: value
+      [name]: value // This updates only the field that changed!
     }));
   };
 
   return (
-    <form>
-      <SuperInput 
+    <!-- <div style={{ padding: '40px', width: "40%", fontFamily: 'Arial' }}> -->
+      <!-- <h1>Registration Form</h1> -->
+
+      {/* Input for First Name */}
+      <SuperInput
         label="First Name"
-        name="firstName"
-        value={user.firstName}
-        onChange={handleChange}
+        name="firstName" // <--- The ID tag
+        value={formData.firstName}
+        onChange={handleInputChange}
+        placeholder="Enter first name"
       />
-      <SuperInput 
+
+      {/* Input for Last Name */}
+      <SuperInput
         label="Last Name"
-        name="lastName"
-        value={user.lastName}
-        onChange={handleChange}
+        name="lastName" // <--- The ID tag
+        value={formData.lastName}
+        onChange={handleInputChange}
+        placeholder="Enter last name"
       />
-      <SuperInput 
+
+      {/* Input for Email with a basic error check */}
+      <SuperInput
         label="Email Address"
-        name="email"
+        name="email" // <--- The ID tag
         type="email"
-        value={user.email}
-        onChange={handleChange}
-        error={!user.email.includes('@') ? "Please enter a valid email" : ""}
+        value={formData.email}
+        onChange={handleInputChange}
+        placeholder="example@mail.com"
+        error={formData.email && !formData.email.includes('@') ? "Invalid email address" : ""}
       />
-    </form>
+
+      {/* Preview the Object in real-time */}
+      <div style={{ marginTop: '20px', padding: '10px', background: '#f4f4f4', borderRadius: '8px' }}>
+        <strong>Current State:</strong>
+        <pre>{JSON.stringify(formData, null, 2)}</pre>
+      </div>
+    </div>
   );
-}
+}
+
+export default App;

package/dist/index.js

@@ -18,7 +18,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 var SuperInput = function SuperInput(_ref) {
   var label = _ref.label,
     value = _ref.value,
-    _onChange = _ref.onChange,
+    onChange = _ref.onChange,
     placeholder = _ref.placeholder,
     error = _ref.error,
     style = _ref.style,
@@ -52,7 +52,7 @@ var SuperInput = function SuperInput(_ref) {
     disabled: disabled,
     placeholder: placeholder,
     onChange: function onChange(e) {
-      return _onChange(e.target.value);
+      return _onChange(e.target.value, name);
     }
     // We use a CSS class or inline style with focus logic
     ,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devekene001/super-input",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "A very fancy and professional text input for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",