with-props

Enhance component with preset properties.

installation

npm install @jswork/with-props

usage

import withProps from '@jswork/with-props';
import React from 'react';

interface ButtonProps {
  text: string;
  color?: string;
  size?: 'small' | 'medium' | 'large';
}

const Button: React.FC<ButtonProps> = ({ text, color = 'blue', size = 'medium' }) => {
  return (
    <button style={{ color, fontSize: size === 'small' ? '12px' : size === 'large' ? '20px' : '16px' }}>
      {text}
    </button>
  );
};

// Create a component with default props
const PrimaryButton = withProps(Button, {
  color: 'red',
  size: 'large'
});

const App: React.FC = () => {
  return (
    <div>
      {/* Uses default props */}
      <PrimaryButton text="Click me" />

      {/* Override default props */}
      <PrimaryButton text="Cancel" color="gray" />
    </div>
  );
};

Features

• Type Safe: Full TypeScript support with proper type inference
• Props Merging: Default props are overridden by provided props
• Simple API: Just pass component and default props
• Zero Dependencies: Lightweight and focused

license

Code released under the MIT license.