Container Holder

• A React component library for creating elegant blog layouts with alternating content and image sections. Compatible with both React and Next.js, this package provides reusable container components that help you build consistent and responsive blog layouts with ease.

Installation

npm install @ozanozkaya/container-holder

Features

• 🎨 Responsive design out of the box
• 🔄 Flexible image positioning (left/right)
• 📱 Mobile-friendly layouts
• 🎯 Easy to use with simple props
• 💅 Styled with styled-components
• 📦 Lightweight and optimized

Usage

import { ContainerHolder } from "@ozanozkaya/container-holder";

function BlogPost() {
  return (
    <div>
      <ContainerHolder
        imageUrl="/path/to/image.jpg"
        imageOnRight={true}
        imageAlt="Beautiful landscape"
      >
        <h2>Welcome to My Blog</h2>
        <p>This is a beautiful blog post with an image on the right...</p>
      </ContainerHolder>
    </div>
  );
}

Usage with Next.js App Router

"use client";

import { ContainerHolder } from "@ozanozkaya/container-holder";
import Image from "next/image";

export default function BlogPost() {
  return (
    <div>
      <ContainerHolder
        imageUrl="/path/to/image.jpg"
        imageOnRight={true}
        imageAlt="Beautiful landscape"
        ImageComponent={Image}
        imageProps={{
          width: 800,
          height: 600,
          priority: true,
        }}
      >
        <h2>Welcome to My Blog</h2>
        <p>This is a beautiful blog post with Next.js Image optimization...</p>
      </ContainerHolder>
    </div>
  );
}

Usage with Next.js Pages Router

import { ContainerHolder } from "@ozanozkaya/container-holder";
import Image from "next/image";

export default function BlogPost() {
  return (
    <div>
      <ContainerHolder
        imageUrl="/path/to/image.jpg"
        imageOnRight={true}
        imageAlt="Beautiful landscape"
        ImageComponent={Image}
        imageProps={{
          width: 800,
          height: 600,
          priority: true,
        }}
      >
        <h2>Welcome to My Blog</h2>
        <p>This is a beautiful blog post with Next.js Image optimization...</p>
      </ContainerHolder>
    </div>
  );
}

Props

| Prop | Type | Default | Description | | ---------------- | ------------------------ | ------------- | --------------------------------------------------------- | | imageUrl | string | required | URL of the image to display | | imageOnRight | boolean | false | Controls image position (true = right, false = left) | | imageAlt | string | "Blog image" | Alt text for the image | | children | ReactNode | required | Content to display (can include any valid React elements) | | ImageComponent | React.ComponentType | undefined | Optional component to render the image (e.g., Next/Image) | | imageProps | object | {} | Additional props to pass to the image component | | background | string | "transparent" | Background color or gradient | | containerStyle | object | {} | Custom styles for the container |

Customization Examples

// Adding hover effects
import { LeftImageContainer } from "@ozanozkaya/container-holder";
import styled from "styled-components";

const CustomContainer = styled(LeftImageContainer)`
  transition: transform 0.3s ease;
  &:hover {
    transform: scale(1.02);
  }
`;

// Using custom styles
<RightImageContainer
  imageUrl="/image.jpg"
  containerStyle={{
    backgroundColor: "#f8f9fa",
    borderRadius: "16px",
    boxShadow: "0 4px 6px rgba(0,0,0,0.1)",
  }}
>
  <h2>Custom Styled Container</h2>
</RightImageContainer>;

Examples

Basic Usage

import { ContainerHolder } from "@ozanozkaya/container-holder";

function BlogPost() {
  return (
    <div>
      <ContainerHolder
        imageUrl="https://picsum.photos/800/600"
        imageOnRight={true}
        imageAlt="Beautiful landscape"
      >
        <h2>Welcome to My Blog</h2>
        <p>This is a beautiful blog post with an image on the right...</p>
      </ContainerHolder>

      <ContainerHolder
        imageUrl="https://picsum.photos/800/600"
        imageOnRight={false}
        imageAlt="City view"
      >
        <h2>Another Section</h2>
        <p>This section has the image on the left for variety...</p>
      </ContainerHolder>
    </div>
  );
}

Styling Content

• The content area accepts any valid React elements, so you can style it however you want:

<ContainerHolder imageUrl="/path/to/image.jpg">
  <h2 style={{ color: "#2c3e50", marginBottom: "1rem" }}>
    Custom Styled Title
  </h2>
  <p style={{ lineHeight: "1.6", color: "#34495e" }}>
    Your beautifully styled content goes here...
  </p>
  <button style={{ marginTop: "1rem" }}>Read More</button>
</ContainerHolder>

Browser Support

The component is compatible with all modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

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

License

• MIT © [Ozan Ozkaya]

Author

• Ozan Ozkaya

Support

• If you have any questions or need help, please open an issue on GitHub.