@devekene001/super-input 0.0.4 → 0.0.5

package/README.md

@@ -1,23 +1,84 @@
-# My Super Input
+@devekene001/super-input
+A professional, universal, and highly flexible text input component for React.
 
-A professional, reusable text input for React.
+🚀 Features
+Universal: Built for React (Web) and React Native (Mobile).
 
-## How to use it:
-1. Install it: `npm install my-super-input`
-2. Use it in your code:
+Object Support: Handle complex state objects with ease using the name prop.
 
-```javascript
-import SuperInput from 'my-super-input';
+Accessible: Built-in accessibility with automatic id and htmlFor linking.
+
+Validation Ready: Visual error states and descriptive error messages.
+
+TypeScript: Full type definitions included.
+
+📦 Installation
+Bash
+npm install @devekene001/super-input
+🛠 Usage
+Option 1: Simple String (The Basic Way)
+Best for single inputs like a search bar or a single name field.
+
+JavaScript
+import React, { useState } from 'react';
+import SuperInput from '@devekene001/super-input';
 
 function App() {
-  const [name, setName] = React.useState('');
+  const [name, setName] = useState('');
   
   return (
     <SuperInput 
       label="Your Name"
       value={name}
-      onChange={setName}
-      placeholder="Type here..."
+      onChange={(val) => setName(val)}
+      placeholder="Type your name..."
     />
   );
+}
+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';
+
+function ProfileForm() {
+  const [user, setUser] = useState({
+    firstName: '',
+    lastName: '',
+    email: ''
+  });
+
+  // One function to handle all inputs!
+  const handleChange = (value, name) => {
+    setUser(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  return (
+    <form>
+      <SuperInput 
+        label="First Name"
+        name="firstName"
+        value={user.firstName}
+        onChange={handleChange}
+      />
+      <SuperInput 
+        label="Last Name"
+        name="lastName"
+        value={user.lastName}
+        onChange={handleChange}
+      />
+      <SuperInput 
+        label="Email Address"
+        name="email"
+        type="email"
+        value={user.email}
+        onChange={handleChange}
+        error={!user.email.includes('@') ? "Please enter a valid email" : ""}
+      />
+    </form>
+  );
 }

package/dist/index.d.ts

@@ -1,14 +1,25 @@
 import React from 'react';
 
 export interface SuperInputProps {
+    /** The title of the input box */
     label?: string;
+    /** The actual text inside the box */
     value: string;
-    onChange: (value: string) => void;
+    /** * The magic function! 
+     * Now it sends back the VALUE and the NAME of the field 
+     */
+    onChange: (value: string, name?: string) => void;
+    /** Grey ghost text shown when empty */
     placeholder?: string;
+    /** Red error message to show below the box */
     error?: string;
+    /** What kind of keyboard/input to show */
     type?: 'text' | 'password' | 'email' | 'number';
+    /** Is the box locked? */
     disabled?: boolean;
+    /** Custom "paint" for the box */
     style?: React.CSSProperties;
+    /** The 'Key' used to identify this input in an object (e.g., 'username') */
     name?: string;
 }
 

package/package.json

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