React Hello World Display

A simple and beautiful React component that displays a customizable "Hello World" message.

Installation

npm install react-hello-world-display

Usage

Basic Usage

import React from 'react';
import { HelloWorldDisplay } from 'react-hello-world-display';

function App() {
  return (
    <div>
      <HelloWorldDisplay />
    </div>
  );
}

Custom Message

import React from 'react';
import { HelloWorldDisplay } from 'react-hello-world-display';

function App() {
  return (
    <div>
      <HelloWorldDisplay message="Welcome to my app!" />
    </div>
  );
}

Custom Styling

import React from 'react';
import { HelloWorldDisplay } from 'react-hello-world-display';

function App() {
  return (
    <div>
      <HelloWorldDisplay 
        message="Custom styled message"
        className="my-custom-class"
        style={{
          backgroundColor: '#ff6b6b',
          color: 'white',
          fontSize: '32px'
        }}
      />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | message | string | "Hello World!" | The message to display | | className | string | "" | Additional CSS class name | | style | React.CSSProperties | {} | Additional inline styles |

Features

• 🎨 Beautiful default styling with modern design
• 🔧 Fully customizable with props
• 📱 Responsive and mobile-friendly
• 🎯 TypeScript support
• ⚡ Lightweight and performant
• 🎭 CSS-in-JS styling with fallback to className

Development

Install Dependencies

npm install

Build the Package

npm run build

Development Mode

npm run dev

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.