{article.title}
{article.content}
Elegant, declarative React utility components for common UI patterns
npm install meemawElegant, declarative React utility components for common UI patterns
• Installation
• Components
• Examples
• Documentation
---
Stop writing repetitive JSX patterns. Meemaw provides a collection of lightweight, zero-dependency React components that make your code more readable and maintainable.
``jsx
// Before
{
isLoggedIn ?
}
// After
;
`
- Zero dependencies - Only React as peer dependency
- Tiny bundle - Less than 10KB total
- Tree-shakeable - Import only what you need
- TypeScript first - Full type safety out of the box
- 100% test coverage - Thoroughly tested and reliable
- SSR compatible - Works with Next.js, Remix, and other frameworks
---
`bash`
npm install meemaw
`bash`
yarn add meemaw
`bash`
pnpm add meemaw
---
#### , ,
Clean match-case pattern for multiple conditions. No more nested ternaries.
`jsx
import { Switch, Case, Default } from 'meemaw';
function OrderStatus({ status }) {
return (
);
}
`
####
Simple conditional rendering with optional fallback.
`jsx
import { Show } from 'meemaw';
// Basic usage
// With fallback
// Using 'if' prop (alias for 'when')
`
####
Hide content conditionally or based on viewport breakpoints.
`jsx
import { Hidden } from 'meemaw';
// Conditional hiding
// Responsive hiding
`
Breakpoints:
- mobile: < 768pxtablet
- : < 1024pxdesktop
- : ≥ 1024px
####
Handle async operation states with built-in loading and error UI.
`jsx
import { Loadable } from 'meemaw';
function UserData() {
const { data, loading, error } = useFetch('/api/user');
return (
);
}
// Custom loading and error components
error={error}
loadingComponent={
errorComponent={
>
;
`
---
####
Iterate arrays or repeat elements n times with clean syntax.
`jsx
import { Repeat } from 'meemaw';
// Repeat n times
{(_, index) =>
// Iterate over array
const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
{(user, index) => (
)}
// Static children (repeated as-is)
`
---
####
Delay rendering until a condition is met or timeout expires.
`jsx
import { Delayed } from 'meemaw';
// Show after 3 seconds
// Show at specific date/time
// Show when condition becomes true
`
####
Display content only once with optional persistence.
`jsx
import { ShowOnce } from 'meemaw';
// Show for 5 seconds then hide forever
// Show once per session
// Show once across all sessions (localStorage)
// Show once in memory (resets on page reload)
`
Persistence types:
- local - Persists across browser sessions (localStorage)session
- - Persists within current session (sessionStorage)memory
- - Persists only in memory (resets on reload)
---
####
Copy text to clipboard with automatic success/error handling.
`jsx
import { CopyToClipboard } from 'meemaw';
// Copy specific text
// Copy with callbacks
onSuccess={() => toast.success('Copied!')}
onError={(err) => toast.error(err.message)}
>
// Render function pattern with copy state
{(copy, copied) => (
)}
// Auto-extract text from children
const greeting = "Hello, World!";
`
####
Truncate text with optional expand/collapse functionality.
`jsx
import { Clamp } from 'meemaw';
// Clamp by character count
{longText}
// Clamp by line count {article}
// Expandable with custom text
expandable
expandText="Read more"
collapseText="Show less"
truncateEnd="..."
onToggle={(isExpanded) => console.log('Expanded:', isExpanded)}
>
{biography}
`
---
`jsx
function UserDashboard() {
const { data, loading, error } = useQuery('/api/dashboard');
return (
);
}
`
`jsx
function Navigation() {
return (
<>
);
}
`
` jsx`
function App() {
return (
);
}
`jsx`
function Dashboard({ user }) {
return (
);
}
`jsx`
function CodeBlock({ code, language }) {
return (
{(copy, copied) => (
)}
{code}
);
}
` {article.content}jsx`
function ArticleCard({ article }) {
return (
{article.title}
);
}
---
All components are written in TypeScript with full type definitions included.
`tsx
import { Show, Repeat, ShowOnce, PersistenceType } from 'meemaw';
interface User {
id: number;
name: string;
}
const users: User[] = [
/ ... /
];
{user.name}};
const persistType: PersistenceType = 'local';
`
---
Meemaw is optimized for minimal bundle impact:
| Export | Size (minified + gzipped) |
| --------------------- | ------------------------- |
| Full package | ~7 KB |
| Individual components | ~0.5-1.5 KB each |
Check the current size: npm run size
Only import what you need - tree-shaking ensures you only ship the components you use.
---
Meemaw supports all modern browsers:
- Chrome (last 2 versions)
- Firefox (last 2 versions)
- Safari (last 2 versions)
- Edge (last 2 versions)
For older browsers, you may need to include appropriate polyfills.
---
`bashInstall dependencies
npm install
---
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the repository
2. Create your feature branch (
)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)---
MIT © spiderocious
---
- npm Package
- GitHub Repository
- Issue Tracker
---
Made with ❤️ for the React community
If you find this library useful, please consider giving it a star on GitHub!