Nonvoluntary Professional Mangling
    Wondering what’s next for npm?Check out our public roadmap! »

    kurasu
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    Kurasu

    A Higher Order Component (HOC) for adding classes to React Components and Dom Elements. Excellent for use with css utility libraries such as tailwind.

    • 🐁 Small at around 1KB.
    • 🦍 Powerful API with the help of clsx/classnames
    • 🦖 Typescript Support
    • 🔥 Blazing fast, probably...

    Installation

    npm i kurasu
    yarn add kurasu
    pnpm i kurasu

    API

    Main Function

    kurasu(Component, classNames);

    Arguments

    Argument Type Notes
    Component A React Component -
    Component An Element String e.g. 'div', 'button'.
    classNames string -
    classNames (props, helper) => string props describes your input props; for helper usage, see clsx.
    classNames false Will not add classes to element.

    Returns

    • Return a React Component with added classNames. Any classNames you pass to this returned component will be merged.

    Element Shorthands

    kurasu.element(classNames);

    Arguments

    Argument Type Notes
    classNames string -
    classNames (props, helper) => string props describes your input props; for helper usage, see clsx.
    classNames false Will not add classes to element.

    Returns

    Return a React Component with added classNames. Any classNames you pass to this returned component will be merged.

    Examples

    Basic usage

    import kurasu from "kurasu";
    const RoundedButton = kurasu.button("rounded p-4");
    
    const Usage = () => (
      <RoundedButton onClick={doSomething}>Button Title</RoundedButton>
    );

    With Component

    import kurasu from "kurasu";
    import { SomeButton } from "./my-react-buttons";
    const SomeRoundedButton = kurasu(SomeButton, "rounded p-4");
    
    const Usage = () => (
      <SomeRoundedButton onClick={doSomething}>Button Title</SomeRoundedButton>
    );

    With props

    import kurasu from "kurasu";
    const WarningButton = kurasu.button<{ warning: boolean }>(
      (props) => props.warning && "bg-red-100"
    );
    
    const Usage = () => (
      <WarningButton onClick={doSomething} warning={false}>
        Button Title
      </WarningButton>
    );

    With props and props helper

    import kurasu from "kurasu";
    const RoundedWarningButton = kurasu.button<{ warning: boolean }>(
      (props, helper) => helper([props.warning && "bg-red-100", "rounded p-4"])
    );
    
    const Usage = () => (
      <RoundedWarningButton onClick={doSomething} warning={false}>
        Button Title
      </RoundedWarningButton>
    );

    Install

    npm i kurasu

    DownloadsWeekly Downloads

    79

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    289 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar