{"id":47338,"library":"create-ls","title":"create-ls","description":"A lightweight React state manager for local storage with real-time cross-tab sync. current version 1.2.2, released periodically. Key differentiators: no external dependencies, simple hook-based API (get/set/reset/hasValue), automatic persistence and synchronization across tabs. Eliminates need for Redux, Context API, or Zustand for persistent state. ESM-only, requires React 19.","status":"active","version":"1.2.2","language":"javascript","source_language":"en","source_url":"https://github.com/jp-coffee/create-ls","tags":["javascript","react","local-storage","state-management","hooks","persistent-state","cross-tab-sync","real-time-sync"],"install":[{"cmd":"npm install create-ls","lang":"bash","label":"npm"},{"cmd":"yarn add create-ls","lang":"bash","label":"yarn"},{"cmd":"pnpm add create-ls","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; required for hooks","package":"react","optional":false}],"imports":[{"note":"ESM-only package. CommonJS require will fail.","wrong":"const createLS = require('create-ls')","symbol":"createLS","correct":"import { createLS } from 'create-ls'"},{"note":"createLS is a named export, not default.","wrong":"import createLS from 'create-ls'","symbol":"createLS","correct":"import { createLS } from 'create-ls'"},{"note":"createLS returns an object with methods; destructuring is fine but get is a method, not standalone.","wrong":"const { get } = createLS('key')","symbol":"get","correct":"const counter = createLS('key'); counter.get()"},{"note":"Destructuring set is allowed but misleading; set must be called on the returned object.","wrong":"const { set } = createLS('key'); set(value)","symbol":"set","correct":"const counter = createLS('key'); counter.set(value)"}],"quickstart":{"code":"\"use client\";\n\nimport { createLS } from 'create-ls';\n\nconst Page: React.FC = () => {\n  const counter = createLS('count', 0);\n\n  return (\n    <div>\n      {counter.hasValue() ? (\n        <h1>Count: {counter.get()}</h1>\n      ) : (\n        <h1>Click the button to set the count</h1>\n      )}\n      <button onClick={() => counter.set(counter.get() + 1)}>\n        Increment by 1\n      </button>\n      <button onClick={() => counter.reset()}>\n        Reset\n      </button>\n    </div>\n  );\n};\n\nexport default Page;","lang":"typescript","description":"Shows basic usage of createLS hook: initializing, getting, setting, resetting a persistent counter."},"warnings":[{"fix":"Ensure the component is a client component (\"use client\") and avoid calling createLS in non-React contexts.","message":"createLS must be called inside a React component or custom hook (client-side only).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use dynamic import or conditional rendering to avoid SSR issues, or wrap with 'use client'.","message":"createLS does not support server-side rendering; it will throw if called on the server.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Update to v1.2.0+ and use hasValue as a boolean property (no parentheses) if you were calling it as hasValue().","message":"In v1.2.0, the 'hasValue' property changed from a function to a boolean (breaking change).","severity":"deprecated","affected_versions":"<1.2.0"},{"fix":"Use ESM import syntax (import { createLS } from 'create-ls') or upgrade to a bundler that supports ESM.","message":"In v1.0.0, the package switched from CommonJS to ESM. require() will no longer work.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Always pass a string as the first argument to createLS.","message":"createLS only works with string keys; using non-string keys will cause an error.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.2.2':22 '19':58 'across':40 'api':34,47 'automat':36 'base':33 'context':46 'creat':2 'create-l':1 'cross':17,72 'cross-tab':16 'cross-tab-sync':71 'current':20 'depend':29 'differenti':26 'elimin':42 'esm':54 'esm-on':53 'extern':28 'get/set/reset/hasvalue':35 'hook':32,67 'hook-bas':31 'javascript':59 'key':25 'lightweight':5 'local':10,62 'local-storag':61 'ls':3 'manag':8,66 'need':43 'period':24 'persist':37,51,69 'persistent-st':68 'react':6,57,60 'real':14,76 'real-tim':13 'real-time-sync':75 'redux':45 'releas':23 'requir':56 'simpl':30 'state':7,52,65,70 'state-manag':64 'storag':11,63 'sync':19,74,78 'synchron':39 'tab':18,41,73 'time':15,77 'version':21 'zustand':49","created_at":"2026-06-07T16:51:01.198621+00:00","updated_at":"2026-06-07T16:51:01.198621+00:00","problems":[{"fix":"Change import createLS from 'create-ls' to import { createLS } from 'create-ls'","cause":"Default import instead of named import.","error":"Error: createLS is not a function"},{"fix":"Ensure createLS is called within a React component (client-side) and after the component mounts.","cause":"Calling createLS outside of a React component or before it's initialized.","error":"TypeError: Cannot read properties of undefined (reading 'get')"},{"fix":"Run `npm install create-ls` and verify the import path is correct: 'create-ls'","cause":"Package not installed or wrong import path.","error":"Module not found: Error: Can't resolve 'create-ls'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/jp-coffee/create-ls#readme","github":"https://github.com/jp-coffee/create-ls","docs":null,"changelog":null,"pypi":null,"npm":"create-ls","openapi_spec":null,"status_page":null,"smithery":null,"categories":["storage"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}