project-peek

A tiny React component that shows project details in a modal when clicked — description, demo link, GitHub repo, and blog post link. Zero dependencies beyond React.

Live demo →

Day 14 of my 50 projects challenge.

Install

npm install project-peek

Usage

import { useState } from 'react';
import { ProjectPeek } from 'project-peek';
import type { PeekProject } from 'project-peek';

const project: PeekProject = {
  title: 'My Project',
  description: 'What it does, briefly.',
  url: 'https://example.com/demo',
  repo: 'https://github.com/you/my-project',
  blogUrl: 'https://example.com/blog/my-project', // optional
};

function App() {
  const [active, setActive] = useState<PeekProject | null>(null);

  return (
    <>
      <button onClick={() => setActive(project)}>Open peek</button>
      <ProjectPeek project={active} onClose={() => setActive(null)} />
    </>
  );
}

Props

ProjectPeek

| Prop | Type | Description | |------|------|-------------| | project | PeekProject \| null | The project to display. Pass null to hide. | | onClose | () => void | Called when the user closes the modal (click outside, ✕ button, or Escape key). |

PeekProject

| Field | Type | Required | |-------|------|----------| | title | string | ✓ | | description | string | — | | url | string | — | | repo | string | — | | blogUrl | string | — |

Styling

The component uses inline styles so it works without any CSS imports or Tailwind setup. It uses a dark zinc/violet color scheme. Custom styling support coming soon.

Running the demo locally

npm install
npm run dev