jesus-react

And lo, the component tree was without form, and void. And then it re-rendered.

<ReactJesus /> renders an ASCII Jesus peeking into your app. That's it. That's the component. Praise the lord.

                          :=++=-
                       :=*#%%%%#+-
                     -+#%@@@@@@@@%+-
                  :+#%@@@@@@%%%%@@@%*:
               +%@@@@@%%#***##%@@@@@@*:
            :+%@@@@%#*+=-----==+#%@@@@%-
          -#@@@@@%#*++=-----=====+#%%@@#
        =#@@@@@@#++#####+========++#@@@@+
     :+%@@@@@@%#+==*#%%%%*=======+*#%@@@*
    -#@@@@@@%%#*====+**#*+=+++++++*#%@@@+
  :*%@@@@@@@@%#*+========+*%%%##***#@@@#
=*%@@@@@@@@@@%*+++=+====*####%%%###%@@@=
@@@@@@@@@@@@@%#**++**=+*#*++**#%%%@@@@*
@@@@@@@@@@@@@%%%%%%%%%%#*++==++#%@@@@*:
@@@@@@@@@@@@%#*+*###%%%******##%@@@@*
@@@@@@@%%@@@%#*++**##%%#####%%%@@@@#:
@@@@%%##%@@@@@%#***##%@%%%@@@@@@@@*:
%%#*****#%@@@@@@%%%%%@@@@@@@@@@@#=
++++++**##%@@@@@@@@@@@@@@@@@@%*-
---==+++***##%%%%%%%@@@@@@@@@#+:
+=--==+++++****###%@@@@@@@@@%+-
**+=-===++++****#%@@@@@@@@@@%+-
****+====++++**#%@@@@@@@@@@@%#-
#***#+++===+++#@@@@@@@@@@@@@#=
****#**#**++++#@@@@@@@@@@@@@@+
++**###########%@@@@@@@@@@@@@=
--===+**#######%%%%@@@@@@@@@*
-------=++*###%##%%@@@@@@@@#
==---=-----=+***#%%%%%%%%@%+
=--------===++*#%###%%%%%%%*=
-------===+*#*######%%%%%%%#+=
------===+**##%#######%%%%%%#+
-----==+++*###***#####%%%%%%%+
---====++******##%####%%%%%%%+
-====+****++*##%#####%%%%%%%@+
====+*##****#######%%%%%%%%@*
++*###****####**##%%%%%%@@@%:
*##*#***#####***#%%%%%@@@@@+
+#*+####%##***###%%@@@@@@@%:
+*++#%%%##**##%%@@@@@@@@@@-
++++%%#####%%%%%@@@@@@@@@+
=+++#%#%%%%%%%@@@@@@@@@@%:
++++*%@%%%%@@@@@@@@@@@@@+
*+++*%%%@@@@%%%%@@@@@@@#
++++*#@@@%%%%%@@@@@@@@%-
*++**##@@@%@@@@@@@@@@@=
#*****+%%@@%@@@@@@@@@+
###*+=*@%@@%%@@@@@@@@-
*++=++#%%@@@@@@@@@@@@-
==+++*%%@@@@@@@@@@@@@-
+++*%%@@@@@@@@@@@@@%-
++*%%%@@@@@@@@@@@@%+
+**%%%@@@@@@@@@@@@#-
**#%%@@@%@@@@@@@%=
*#%%@@@%%@@@@@%+:
%%%@@@%%%@@@%*-
@@@@@%%%@@@#-
@@@%%%%@@%=
@@%%@@@%+:
@@@@@@*:
@@@@#-
@@%=
#+

Installation

npm install jesus-react

One dependency in your package.json, zero in His. He carries no baggage — only your sins and a peerDependency on React 17+.

Usage

import { ReactJesus } from "jesus-react";

function App() {
  return <ReactJesus />;
}

No props. He does not need anything from you. He accepts your container exactly as it is and fills it completely.

He works in mysterious ways (responsive abstraction)

<ReactJesus /> scales to whatever space you give Him. But He refuses to become an unreadable smudge: once the font would drop below legibility, the art is re-rendered at a coarser resolution with a smaller character palette instead.

In other words: the smaller the screen, the more abstract He becomes — from a fully detailed portrait on desktop, down to a pure two-tone silhouette on a smartwatch. Blessed are the low-DPI, for they shall still receive the general idea.

• Full glory — large containers get the complete 10-character ramp.
• Impressionism — medium containers get a downsampled, softer Jesus.
• Minimalism — tiny containers get the silhouette. He is still there. He is always there.

Features

• ✝️ Renders Jesus
• 📐 Fits any container via ResizeObserver — no divine intervention required
• 🕊️ Progressive abstraction instead of illegible shrinking

FAQ

Why does He peek from the corner? He's checking on your code. He saw the nested ternary. He forgives you.

Does it support dark mode? He inherits color from His parent. He is the light, but He respects your theme.

Can I make Him bigger? Make His container bigger. As with all things: you get out what you put in.

Local development

The playground uses Vite, which is not a dependency of the package itself:

npm install
npm install --no-save vite
npm run dev

The playground renders ReactJesus directly from src, so changes to src/ReactJesus.tsx appear immediately. Drag the preview box's corner to watch the abstraction miracle happen.

License

MIT — free, as grace should be.