npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-mnt

v1.1.8

Published

Create strongly typed React components, including essential features such as polymorphism and ref handling.

Downloads

15

Readme

react-mnt

CI Status MIT License

react-mnt is a versatile utility library designed to enhance the capabilities of React components. It exposes a powerful mnt function that allows you to create component factory functions. With mnt, you can easily customize and extend the behavior of your React components, making it an invaluable tool for building flexible and dynamic UIs.

Key Features

  • 💡 Polymorphism: Achieve polymorphism by dynamically changing the component's underlying HTML element. This allows you to easily adapt your component to different use cases.

    Usage Example:

    import mnt from 'react-mnt';
    
    // Create a link-like button using the 'as' property
    const LinkButton = mnt('button').params({ as: 'a' })`text-blue`;
    
    function App() {
      // Change the underline HTML element also on site
      return <LinkButton as='input' type='submit' />;
    }
  • 🔄 Forwarded Ref: react-mnt ensures that your enhanced components maintain support for forwarded refs, making them seamlessly integrate with other libraries and components that rely on refs.

    Usage Example:

    import mnt from 'react-mnt';
    
    // Create an enhanced button component that forwards refs
    const EnhancedButton = mnt('button')``;
    
    // Usage in a parent component
    function ParentComponent() {
      const buttonRef = React.createRef();
      return <EnhancedButton ref={buttonRef}>Click me!</EnhancedButton>;
    }
  • 🚀 Extend Existing Components: You can enhance and build upon existing components, making it easy to extend the functionality of your favorite libraries or your own components.

    Usage Example:

    import mnt from 'react-mnt';
    
    // Extend a base typography component with custom styles
    const BaseTypography = /* your base typography component */;
    const EnhancedTypography = mnt(BaseTypography)`text-blue`;
  • 📚 Strong Typing for Rendered Component: react-mnt ensures strong typing for the rendered component, helping you catch type-related errors early in the development process.

    Usage Example:

    import mnt from 'react-mnt';
    
    interface ButtonProps {
      variant?: 'primary' | 'secondary'
    }
    
    // Create an enhanced button component with strong typing
    const EnhancedButton = mnt('button')<ButtonProps>`text-blue`;
    
    // Usage with TypeScript
    function App() {
      // Suggests values for optional `variant` property
      return <LinkButton variant="primary" />;
    }

These highlighted features, accompanied by usage examples, showcase the power and flexibility of react-mnt for building robust and dynamic React components.

Installation

You can install react-mnt via npm or yarn. Make sure you have Node.js and npm (or yarn) installed in your project before proceeding.

Using npm

npm install react-mnt

Using yarn

yarn add react-mnt

Once the package is installed, you can import it into your React application and start using the mnt function to create enhanced components.

Usage

react-mnt introduces the mnt function, which provides a seamless way to enhance the capabilities of your React components. It allows you to modify component behavior and style by applying tagged styles and additional props.

Basic Usage

import mnt from 'react-mnt';

const EnhancedButton = mnt('button')`
  text-blue 
  ${props => props.disabled && 'text-disabled'}
`;

In the example above, mnt is used to enhance a button element by applying CSS classes based on tagged styles and props. This creates a more versatile and customized button component.

Enhanced Component with Base Component

You can also use mnt with a base component to further extend its functionality.

import mnt from 'react-mnt';

const BaseTypography = /* your base typography component */;
const EnhancedTypography = mnt(BaseTypography)`
  text-blue
  ${props => props.disabled && 'text-disabled'}
`;

Here, the mnt function is applied to a base typography component, allowing you to add custom styles and behavior.

Advanced Usage with Parameters

mnt supports advanced usage where you can define parameters for your enhanced components.

import mnt from 'react-mnt';

const EnhancedButton = mnt('button').params({ as: 'a' })`
  text-blue
  ${props => props.disabled && 'text-disabled'}
`;

In this example, the params method is used to specify additional parameters, such as changing the element type to 'a'. This is useful for creating link-like buttons with custom styles.

API Reference

mnt<TElement, TElementHtmlProps>(elementType: TElement): MntComponent

  • elementType (TElement): The target element or component to enhance.

Returns a factory function for creating enhanced components.

Creates an enhanced component using the provided tagged styles.

mnt.params<Props>(params: MntParamsOrFactory<Props>)

  • params (MntParamsOrFactory): Additional parameters or a factory function to modify the component's behavior.

Returns an enhanced component with the specified parameters.

Other Types and Utility Functions

  • Various types and utility functions are exported, allowing you to work with component parameters, classes, and tagged styles.

License

This project is licensed under the MIT License - see the LICENSE.md file for details. You are free to use and distribute this package under the terms of the MIT License.