urland v0.2.0

Ur(l)land is a fast, basic, and lightweight React state library designed for seamlessly managing publishable states between users.

Explore a live demo here.

Installation

$ npm i urland
# or
$ pnpm add urland
# or
$ yarn add urland

Getting Started

Manage your linked value using a React hook similar to useState.

import { useState } from 'urland'

const App = () => {
  const [count, setCount] = useState(
    'count',
    0 /* default value when parameter not found */
  )
  return (
    <div>
      <h1>Count is: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

That's It!

Now, increment the count as you wish and share the link with your friends. They will see the same output.

Why URLand?

• Publishable & Global
• Simple & Easy-to-use
• Users can see exactly the same thing

Why urland instead of useState?

• Saves a lot of lines for getting param and etc.

useState Hook

Custom React hook for managing a state variable synchronized with a URL query parameter.

• key: The name of the URL query parameter to sync with.
• initialValue: The value of the URL query parameter - when not initialized.

const [theme, setTheme] = useState('theme', 'light')

getter Variable

Returns the current value of the URL query parameter.

setter Variable

Sets the current value of the URL query parameter.

setTheme('dark-blue')

If you want more control over the state, you can assign a variable to a function.

setTheme(prev => (prev === 'light-blue' ? 'dark-blue' : 'light-blue'))

License

The MIT License

License