@walkover/autosuggest-custom - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

package.json

 {
   "name": "@walkover/autosuggest-custom",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "author": "walkover-web",
@@ -5,0 +5,0 @@ "main": "build/index.js",

README.md

@@ -7,4 +7,84 @@ ## CustomAutoSuggest
 ```
-hello world
+npm install @walkover/autosuggest-custom
 
-```
+```
+
+### Usage
+To use the CustomAutoSuggest component in your React application, follow these steps:
+
+1. Import the component:
+
+```
+import CustomAutoSuggest from '@walkover/autosuggest-custom';
+
+```
+
+2. Render the component in your JSX:
+
+```
+<CustomAutoSuggest
+  suggestion={suggestions}
+  chipClass="chip"
+  editableDivClass="editable-div"
+  suggestionBoxClass="suggestionBox"
+  getInputValueWithContext={getInputValueWithContext}
+  defaultValue={defaultValue}
+/>
+
+```
+
+### Props
+The CustomAutoSuggest component accepts the following props:
+
+- suggestion (optional): An array of suggestion objects. Each suggestion object should have a name property that represents the suggestion's display name and an optional content property that provides additional information for the suggestion.
+
+- chipClass (optional): CSS class name for the suggestion chips. Defaults to 'chip'.
+
+- editableDivClass (optional): CSS class name for the editable text input. Defaults to 'editable-div'.
+
+- suggestionBoxClass (optional): CSS class name for the suggestion box container. Defaults to 'suggestionBox'.
+
+- getInputValueWithContext (optional): A callback function that receives the converted text value and the HTML code of the editable div. It is called whenever the input value changes.
+
+- defaultValue (optional): The initial value of the editable div.
+
+
+### Example
+Here's an example usage of the CustomAutoSuggest component:
+
+```
+import React from 'react';
+import CustomAutoSuggest from '@walkover/autosuggest-custom';
+
+const suggestions = [
+  { name: 'Apple', content: 'Fruit' },
+  { name: 'Banana', content: 'Fruit' },
+  { name: 'Carrot', content: 'Vegetable' },
+  { name: 'Tomato', content: 'Fruit/Vegetable' },
+];
+
+const MyComponent = () => {
+  const getInputValueWithContext = (convertedHtmlCode, htmlCode) => {
+    // Handle the converted input value and HTML code
+    console.log('Converted Value:', convertedHtmlCode);
+    console.log('HTML Code:', htmlCode);
+  };
+
+  return (
+    <div>
+      <h1>Custom Auto Suggest Example</h1>
+      <CustomAutoSuggest
+        suggestion={suggestions}
+        getInputValueWithContext={getInputValueWithContext}
+        defaultValue="Start typing..."
+      />
+    </div>
+  );
+};
+
+export default MyComponent;
+
+```
+
+## Credits
+The CustomAutoSuggest component was developed by [Tanish Jain](https://www.linkedin.com/in/tanish-jain-bb87b5203/) and [Idris Bohra](https://www.linkedin.com/in/idris-bohra-89715616b/)

No alert changes

Improved metrics

Total package byte prevSize

43759

increased by5.98%

Number of lines in readme file

89

increased by888.89%

No dependency changes