Input Text Kit: A Customizable Text Styling Library for React

Input Text Kit is a powerful and flexible React component library that provides advanced text styling capabilities. It allows developers to easily integrate customizable text input features into their applications, including font selection, color picking, and gradient application.

This library is designed to enhance the user experience by offering a rich set of text formatting options within a modal interface. It's ideal for applications that require dynamic text styling, such as content creation tools, design platforms, or any project where text customization is a key feature.

Repository Structure

input-text-kit/
├── package.json
├── rollup.config.js
├── tsconfig.json
├── src/
│   ├── components/
│   │   ├── ButtonWithModal.tsx
│   │   ├── ColorPickerModal.tsx
│   │   ├── FontFamilySelector.tsx
│   │   ├── GradientGrid.tsx
│   │   └── SizeInput.tsx
│   ├── interfaces/
│   │   └── TextStyle.ts
│   ├── utils/
│   │   ├── createTextStyle.ts
│   │   └── gradientes.ts
│   └── index.tsx
└── .storybook/
    ├── main.ts
    └── preview.ts

Usage Instructions

Installation

To install the Input Text Kit library, run the following command in your project directory:

npm install input-text-kit

Ensure you have React and React DOM installed as peer dependencies:

npm install react react-dom

Getting Started

1. Import the ButtonWithModal component in your React application:

import { ButtonWithModal } from 'input-text-kit';

2. Use the component in your JSX:

function App() {
  const handleTextStyleChange = (newStyle) => {
    console.log('New text style:', newStyle);
    // Handle the new style here
  };

  return (
    <div>
      <ButtonWithModal onChange={handleTextStyleChange} />
    </div>
  );
}

3. The ButtonWithModal component will render a button that, when clicked, opens a modal with text styling options.

Configuration

You can pass initial text style values to the ButtonWithModal component:

<ButtonWithModal 
  value={{
    text: {
      fontFamily: 'Arial',
      size: '16px',
      color: '#000000',
      bold: false,
      italic: false,
      underline: false,
      lineThrough: false,
      align: 'left'
    },
    background: {
      color: 'transparent'
    }
  }}
  onChange={handleTextStyleChange}
/>

API Reference

ButtonWithModal Props

• value: (Optional) An object of type Partial<TextStyle> representing the initial text style.
• onChange: A callback function that receives the updated TextStyle object when changes are made.

TextStyle Interface

interface TextStyle {
  text: {
    fontFamily: string;
    size: string;
    color: string;
    bold: boolean;
    italic: boolean;
    underline: boolean;
    lineThrough: boolean;
    align: 'left' | 'center' | 'right' | 'justify';
    letterSpacing: string;
    lineHeight: string;
    gradient?: string;
  };
  background: {
    color: string;
  };
}

Examples

Basic Usage

import React from 'react';
import { ButtonWithModal } from 'input-text-kit';

function TextEditor() {
  const handleStyleChange = (newStyle) => {
    console.log('Updated style:', newStyle);
    // Apply the new style to your text element
  };

  return (
    <div>
      <h1>Text Editor</h1>
      <ButtonWithModal onChange={handleStyleChange} />
      <div id="text-preview">
        Preview text will be styled here
      </div>
    </div>
  );
}

export default TextEditor;

With Initial Style

import React, { useState } from 'react';
import { ButtonWithModal } from 'input-text-kit';

function StyledTextEditor() {
  const [textStyle, setTextStyle] = useState({
    text: {
      fontFamily: 'Roboto',
      size: '18px',
      color: '#333333',
      bold: true,
      italic: false,
      underline: false,
      lineThrough: false,
      align: 'left'
    },
    background: {
      color: '#f0f0f0'
    }
  });

  const handleStyleChange = (newStyle) => {
    setTextStyle(newStyle);
  };

  return (
    <div>
      <h1>Styled Text Editor</h1>
      <ButtonWithModal value={textStyle} onChange={handleStyleChange} />
      <div id="text-preview" style={{
        fontFamily: textStyle.text.fontFamily,
        fontSize: textStyle.text.size,
        color: textStyle.text.color,
        fontWeight: textStyle.text.bold ? 'bold' : 'normal',
        fontStyle: textStyle.text.italic ? 'italic' : 'normal',
        textDecoration: `${textStyle.text.underline ? 'underline' : ''} ${textStyle.text.lineThrough ? 'line-through' : ''}`,
        textAlign: textStyle.text.align,
        backgroundColor: textStyle.background.color
      }}>
        This text will update based on the selected styles
      </div>
    </div>
  );
}

export default StyledTextEditor;

Troubleshooting

Common Issues

1. Font not loading:

   • Ensure you have a valid Google Fonts API key set in the FontFamilySelector component.
   • Check your network connection and console for any API errors.

2. Styles not applying:

   • Verify that the onChange prop is correctly passing the updated style to your parent component.
   • Ensure you're applying the received styles to your text elements correctly.

3. Modal not opening:

   • Check for any console errors related to React or Material-UI.
   • Ensure you're not blocking the button with other UI elements.

Debugging

To enable debug mode and verbose logging:

1. Set a DEBUG environment variable:

export DEBUG=input-text-kit:*

2. In your application, import the debug logger:

import debug from 'debug';
const log = debug('input-text-kit:main');

// Use it in your component
log('ButtonWithModal rendered with props:', props);

Log files are typically located in your application's log directory. For a Create React App project, check the browser console for logs.

Performance Optimization

To optimize performance when using Input Text Kit:

1. Memoize the ButtonWithModal component if it's re-rendering unnecessarily:

import React, { useMemo } from 'react';
import { ButtonWithModal } from 'input-text-kit';

function OptimizedTextEditor({ initialStyle }) {
  const memoizedButton = useMemo(() => (
    <ButtonWithModal value={initialStyle} onChange={handleStyleChange} />
  ), [initialStyle]);

  return (
    <div>
      {memoizedButton}
      {/* Rest of your component */}
    </div>
  );
}

2. Use the React DevTools Profiler to identify performance bottlenecks.

3. If you're applying styles to a large number of text elements, consider using virtualization techniques like react-window for rendering.

Data Flow

The Input Text Kit library follows a unidirectional data flow pattern. Here's how data flows through the application:

1. The parent component initializes the ButtonWithModal with optional initial text styles.
2. User interacts with the ButtonWithModal, opening the styling modal.
3. User makes style changes within the modal (e.g., font selection, color picking).
4. Each change updates the local state within ButtonWithModal.
5. When the user saves changes, the ButtonWithModal calls the onChange prop with the new style object.
6. The parent component receives the updated style and can apply it to the relevant text elements.

[Parent Component] -> (initial style) -> [ButtonWithModal]
                                              |
                                              v
                                    [User Interaction]
                                              |
                                              v
                                    [Local State Update]
                                              |
                                              v
[Parent Component] <- (updated style) <- [ButtonWithModal]

This flow ensures that the parent component always has the most up-to-date style information, while the ButtonWithModal manages its internal state for a responsive user experience.