React Baby

Hi there! My name is Tomo Myrman, and I'm a web developer. I created a simple library called React Baby that allows you to manage state in your application without any bloat.

This is a page where you can test out the library.
Click the buttons below to change states

Benefits:

  • Lightweight (3KB)
  • Get up and running immediately
  • Not a framework - add it to any one-pager and start using it
  • Works well with Tailwind

Room for improvement:

  • Add support for building components
  • Allowing inline variables to be used in innerHTML (not just in attributes)
  • Allowing useEffect variables to be called without () at the end
  • Run useEffect without time interval

Features

useState

Use the useState hook to set the state of the variables. You can then use the variables in your HTML attributes.

const [background, setBackground] = useState("black")

console.log(background()) // black

setBackground("red")

console.log(background()) // red

useEffect

Use the useEffect hook to trigger custom actions whenever the state changes.

// Empty useEffect for on load:

useEffect(() => {
console.log("Initial useEffect render")
}, [])

// One useEffect:

useEffect(() => {
console.log("background:", background())
}, [background])

// More than one useEffect:

useEffect(() => {
console.log("textColour:", textColour(), "background:", background())
}, [background, textColour])

Inline variables

Use the useState hook to set the state of the variables. You can then use the variables in your HTML attributes (like class and style), and soon in your innerHTML.

// Set initial variables:

const [background, setBackground] = useState("black")

// Inline style:

<h1 style="background: {background}">Welcome</h1>

// Or in Tailwind:

<h1 className={"bg-{background}"}>Welcome</h1>