Codemelon UI Library

This library provides various reusable UI components, such as toasts, cards, navbars, and animated text.

Installation

npm install codemelon-ui-lib

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { Card, createToastContainer } from '@codemelonxyz/ui-library';
import '@codemelonxyz/ui-library/dist/index.css';

const App = () => {
  // Create a card
  const card = new Card({ title: 'Hello World', variant: 'elevated' })
    .setContent('This is a card')
    .render('#app');

  // Setup toast notifications
  const toast = createToastContainer();

  // Show a toast
  toast.show({
    type: 'success',
    message: 'Operation successful!',
    duration: 3000
  });

  return (
    <div id="app">
      {card}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Fancy Toast Example

import React from 'react';
import { FancyToast } from './src/components/FancyToast';

function App() {
  return (
    <div>
      <FancyToast message="Hello World!" type="success" duration={2000} />
    </div>
  );
}
export default App;

Fancy Card Example

import React from 'react';
import { FancyCard } from './src/components/FancyCard';

function App() {
  return (
    <div>
      <FancyCard 
        title="Hello Card" 
        content="This is a fancy card."
        variant="outline"
      />
    </div>
  );
}
export default App;

Fancy Navbar Example

import React from 'react';
import { FancyNavbar } from './src/components/FancyNavbar';

function MyApp() {
  return (
    <FancyNavbar
      items={['Home', 'About', 'Contact']}
      onItemClick={(item) => console.log(item)}
    />
  );
}
export default MyApp;

Animated Text Example

import React from 'react';
import { AnimatedText } from './src/components/AnimatedText';

function MyApp() {
  return <AnimatedText text="Hello, animated world!" animationSpeed={80} />;
}
export default MyApp;

Components

Card

const card = new Card({
  title: 'Optional Title',
  variant: 'default' | 'outlined' | 'elevated'
});

card.setContent('Hello World');
card.render('#container');

Toast

const toast = createToastContainer();

toast.show({
  type: 'success' | 'error' | 'info' | 'warning',
  message: 'Your message here',
  duration: 5000, // optional, defaults to 5000ms
  onClose: () => console.log('Toast closed') // optional
});