Notes Extension

notes-extension is a React component library that provides a modal for managing notes. It allows users to add, edit, and delete notes in a convenient modal interface.

Installation

To install the notes-extension package, use npm or yarn:

npm install notes-extension  #or yarn add notes-extension

Usage

Here's a basic example of how to use the TodoModal component from notes-extension in your React project:

Create React App

npx create-react-app my-app
cd my-app

Import the Component In Index

##z Import the Component In Index

import './App.css';
import NotesExtension from 'notes-extension'; // Import the component
import { useState } from 'react';

Use the Component in Your Application

function App() {
  const [modalOpen, setModalOpen] = useState(false);
  const [todos, setTodos] = useState(['Pranav', 'Saykar']);

  const handleOpen = () => setModalOpen(true);
  const handleClose = () => setModalOpen(false);

  return (
    <div className="App">
      <button onClick={handleOpen}>Open Todo List</button>
      <NotesExtension
        open={modalOpen}
        handleClose={handleClose}
        notes={todos}
        setNotes={setTodos}
      />
      {todos.map((todo, index) => (
        <div key={index}>{todo}</div>
      ))}
    </div>
  );
}

export default App;

Component Props

• open (boolean) : Controls the visibility of the modal.
• handleClose (function) : Function to close the modal.
• notes (string[]) : The current list of notes.
• setNotes (function) : Function to update the list of notes.

Contact Me

You can reach me at: - [email protected]