Hacker News Reader

An experimental Hacker News reader built with React, TypeScript, and modern tooling. Features parallax scrolling effects and a polished UX.

Overview

This project is a modern Hacker News reader that consumes data directly from the Hacker News Firebase REST API. It features:

✨ A parallax-like scrolling inspired in starwars
⚡ Lightning-fast development with Vite
🎨 Customizable themes via styled-components
📱 Responsive design
🔧 Full TypeScript support

Installation

npm install react-hn-reader styled-components

Peer dependencies: react >=16.8 || >=17 || >=18 || >=19, react-dom >=16.8 || >=17 || >=18 || >=19, styled-components >=5.0 || >=6.0

Quick Start

Important: You must include DefaultStyles for proper typography and styling:

import { HackerNewsReader, ThemeProvider, DefaultStyles } from 'react-hn-reader'

function App() {
  return (
    <ThemeProvider>
      <DefaultStyles />
      <HackerNewsReader />
    </ThemeProvider>
  )
}

✅ Fonts are loaded automatically - Google Fonts (Bitter, Work Sans, Nanum Gothic) are injected dynamically when the component mounts.

Features

✨ Parallax scrolling - 3D depth effect with three viewport layers
🖱️ Scroll indicator - Animated mouse icon in top-right (fades on scroll)
🖤 Fixed black logo - Appears at bottom-right when scrolling down
➡️ Arrow icons - Each story displays an arrow-out icon
🎨 Customizable themes - Override all colors via ThemeProvider
🔧 TypeScript - Full type support

Props

Prop	Type	Default	Description
`apiUrl`	`string`	HN Firebase API	Base URL for stories API
`initialCount`	`number`	30	Initial stories to load
`enableLoadMore`	`boolean`	true	Show load more button
`onStoryClick`	`(story) => void`	-	Click handler
`theme`	`object`	-	Override theme colors
`renderStory`	`(story, index) => ReactNode`	-	Custom story renderer

Usage Examples

Custom Theme

<ThemeProvider theme={{ orange: '#ff4500', onyx: '#1a1a1a' }}>
  <DefaultStyles />
  <HackerNewsReader />
</ThemeProvider>

Custom API

<HackerNewsReader 
  apiUrl="https://your-api.com/v0"
  initialCount={50}
/>

Handle Clicks

<HackerNewsReader 
  onStoryClick={(story) => console.log(story.title)}
/>

Fonts

Google Fonts are loaded automatically when the component mounts:

Bitter - Primary text font
Work Sans - Headings
Nanum Gothic - Author names

No manual configuration needed!

Development

npm install
npm run build    # Build package
npm run dev      # Development mode with example

Publish

npm run build
npm publish

@punkbit/react-hn-reader

Package Exports

Readme