meemaw

library1.0.2jsnpmunverified

Meemaw is a React component library providing declarative utility components for common UI patterns like conditional rendering, iteration, and time-based display. Version 1.0.2 is the current stable release. The library is lightweight (<10KB), tree-shakeable, and has zero runtime dependencies beyond React 16.8+. It ships TypeScript definitions and offers SSR compatibility. Unlike larger UI kits, Meemaw focuses purely on reducing repetitive JSX patterns with components like <Show>, <Switch>/<Case>/<Default>, and <Repeat>.

npm install meemaw

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · MEEMAW

meemaw

uijavascriptv1.0.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Show

✓ import { Show } from 'meemaw'

✗ import Show from 'meemaw'

Meemaw exports named components, not a default export.

Switch, Case, Default

✓ import { Switch, Case, Default } from 'meemaw'

✗ const { Switch, Case, Default } = require('meemaw')

CommonJS require works but is discouraged; prefer ESM imports.

Repeat

✓ import { Repeat } from 'meemaw'

✗ import { Repeat } from 'meemaw/Repeat'

All components are top-level exports; no subpath imports.

Demonstrates usage of Show, Switch/Case/Default, Repeat, Hidden, Loadable, Delayed, and ShowOnce components with TypeScript.

import React from 'react'; import { Show, Repeat, Switch, Case, Default, Hidden, Loadable, Delayed, ShowOnce } from 'meemaw'; function App() { const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]; return ( <div> {/* Conditional rendering */} <Show when={true} fallback={<p>fallback</p>}> <h1>Hello</h1> </Show> {/* Switch/Case/Default */} <Switch> <Case when={false}>No</Case> <Default>Yes</Default> </Switch> {/* Repeat */} <Repeat each={users}> {(user) => <p key={user.id}>{user.name}</p>} </Repeat> {/* Hidden */} <Hidden when={false}>visible</Hidden> {/* Loadable */} <Loadable loading={false} error={null}> <p>loaded</p> </Loadable> {/* Delayed */} <Delayed till={1000}> <p>shown after 1s</p> </Delayed> {/* ShowOnce */} <ShowOnce> <p>shown once</p> </ShowOnce> </div> ); }

Debug

Known issues

gotchaThe `if` prop on `<Show>` is an alias for `when`, but using both may cause unexpected behavior.

fix

Use only `when` or `if`, not both.

affects: >=1.0.0

deprecatedCommonJS require() will be unsupported in future major versions. ESM import is preferred.

fix

Switch to ES module imports: `import { Show } from 'meemaw'`

affects: >=1.0.0

gotchaThe `Loadable` component's `error` prop must be an Error object or null; passing a string will not trigger error state correctly.

fix

Wrap error strings in an Error object: `error={new Error('message')}`

affects: >=1.0.0

gotchaThe `Repeat` component's `each` prop expects an array of objects; primitive arrays may cause key warnings if keys are not stringified.

fix

Provide a unique `key` prop explicitly (e.g., using index) when iterating primitives.

affects: >=1.0.0

gotchaThe `Hidden` component with `on` prop uses CSS media queries; it does not prevent rendering server-side, only hides client-side after hydration.

fix

For SSR-specific hiding, use conditional logic with `useEffect` or framework utilities.

affects: >=1.0.0

gotchaThe `Delayed` component's `till` prop accepts milliseconds or a Date object; passing a number as a string will not work.

fix

Ensure numeric values are actual numbers: `till={3000}` not `till="3000"`

affects: >=1.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'meemaw'

Package not installed or incorrect import path.

fix

Run `npm install meemaw --save` or ensure package is in node_modules.

'Show' is not exported from 'meemaw'

Using default import instead of named import.

fix

Use `import { Show } from 'meemaw'` instead of `import Show from 'meemaw'`.

TypeError: Cannot read properties of null (reading 'props')

Null or undefined value passed to `when` prop of <Show>.

fix

Ensure `when` prop is a boolean: `<Show when={someBoolean}>`.

Warning: Each child in a list should have a unique 'key' prop.

Using Repeat with `each` prop without providing a key in the render function.

fix

Add a key prop inside the render callback: `<Repeat each={items}>{(item, index) => <div key={index}>{item}</div>}</Repeat>`

Upgrade

Version history

1.0.2latest on npm

Audit

Dependencies

reactrequiredPeer dependency: components require React 16.8+ (hooks).

react-domrequiredPeer dependency: required for rendering components.

Agent activity

35 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/spiderocious/meemaw ↗

packagemeemaw ↗

homepagehttps://github.com/spiderocious/meemaw ↗