react-dynamic-parser v1.0.0

React Dynamic Parser

A React library for dynamic content parsing and form input, allowing you to embed editable dynamic content into your React applications easily.

Features

• Dynamic Content Parsing: Parse dynamic content embedded within text.
• Customizable Inputs: Support for different input types (text, URL, number) based on the content type.
• Custom Parsers: Ability to define custom parsers to fit specific needs.
• Context-based State Management: Manage state seamlessly with React Context API.

Installation

Install the library using npm:

npm install react-dynamic-parser

Usage

import React from 'react';
import { DynamicContentProvider, DynamicContentDisplay, DynamicContentForm } from 'react-dynamic-parser';

const App = () => {
  const initialContent = "This is a sample content with [text:editable text] and [url:https://example.com]";

  return (
    <DynamicContentProvider initialContent={initialContent}>
      <DynamicContentDisplay />
      <DynamicContentForm />
    </DynamicContentProvider>
  );
};

export default App;

Custom Parsers

You can define custom parsers to parse content based on your requirements. Here's an example of a custom parser that parses content within square brackets:

const customParseContent = (content) => {
  // Custom parsing logic
  // Example: parse [bold:text] and [italic:text]
  const regex = /\[([^\]:]*):([^\]]+)\]/g;
  let match;
  const keyValuePairs = [];

  while ((match = regex.exec(content)) !== null) {
    keyValuePairs.push({ type: match[1], value: match[2], original: match[0] });
  }

  return keyValuePairs;
};

const App = () => {
  const initialContent = "This is a sample content with [bold:important text] and [italic:emphasized text]";

  return (
    <DynamicContentProvider initialContent={initialContent} parseContent={customParseContent}>
      <DynamicContentDisplay />
      <DynamicContentForm />
    </DynamicContentProvider>
  );
};

export default App;

Componnets

DynamicContentProvider

The provider component that initializes the context with the parsed content and manages state.

Props

• initialContent (string): The initial content string to be parsed.
• parseContent (function): Optional custom parser function.

<DynamicContentProvider 
    initialContent={initialContent} 
    parseContent={customParseContent}
>
  {children}

</DynamicContentProvider>

DynamicContentDisplay

The component responsible for rendering the dynamically generated content.

<DynamicContentDisplay />

DynamicContentForm

The component that renders the form inputs for editing the dynamic content.

<DynamicContentForm />

Example

Using Different Input Types

const initialContent = "Name: [text:John Doe], Age: [number:30], Website: [url:https://example.com]";

const App = () => {
  return (
    <DynamicContentProvider initialContent={initialContent}>
      <DynamicContentDisplay />
      <DynamicContentForm />
    </DynamicContentProvider>
  );
};

export default App;

Styling the Components

You can style the components by passing custom class names or using CSS modules.

/* App.css */
.input-container {
  margin-bottom: 1rem;
}

.input-container label {
  font-weight: bold;
}

import './App.css';

const App = () => {
  const initialContent = "Edit this text: [text:click to edit]";

  return (
    <DynamicContentProvider initialContent={initialContent}>
      <DynamicContentDisplay />
      <DynamicContentForm />
    </DynamicContentProvider>
  );
};

export default App;

API

DynamicContentProvider

DynamicContentDisplay

No props. Uses context to display the generated content.

DynamicContentForm

No props. Uses context to display and manage form inputs.

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue if you have any suggestions or feedback.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements Note

By following this detailed README, users will have a clear understanding of how to install, use, and customize the ReactDynamicParser library.