@ozanozkaya/container-holder NPM

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>