{"_id":"@anupamshandilya28/selective-context","name":"@anupamshandilya28/selective-context","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@anupamshandilya28/selective-context","version":"0.1.0","description":"A fast and lightweight React context state management library","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc","prepublishOnly":"npm run build","test":"echo \"Error: no test specified\" && exit 1"},"keywords":["react","context","state-management","typescript"],"author":"","license":"MIT","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/react":"^18.2.0","@types/react-dom":"^18.2.0","typescript":"^5.0.0","react":"^18.2.0","react-dom":"^18.2.0"},"_id":"@anupamshandilya28/selective-context@0.1.0","_nodeVersion":"18.20.6","_npmVersion":"10.8.2","dist":{"integrity":"sha512-3LNwKTXmGLZBa71jKCLgzm2Sfm6YkFZ43ArLE8YUurgLpBMLuVCuUVj+IKZm+LaYT6XHbzUKFGicmSD8ALku9A==","shasum":"ec3270841b2a510ca156961c39bb1d9056e76bb6","tarball":"https://registry.npmjs.org/@anupamshandilya28/selective-context/-/selective-context-0.1.0.tgz","fileCount":6,"unpackedSize":12851,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFWpPsz/fxC6BCEsfrg3DPMv2UODfkl2taM+4s9NM1hzAiEAkFPmQMVwAtSqcBD6feaZjCueyDe4goY2XboAeLBYlI4="}]},"_npmUser":{"name":"anupamshandilya28","email":"anupamshandilya28@gmail.com"},"directories":{},"maintainers":[{"name":"anupamshandilya28","email":"anupamshandilya28@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/selective-context_0.1.0_1746091390626_0.035929768355828395"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-01T09:23:10.552Z","0.1.0":"2025-05-01T09:23:10.822Z","modified":"2025-05-01T09:23:11.095Z"},"maintainers":[{"name":"anupamshandilya28","email":"anupamshandilya28@gmail.com"}],"description":"A fast and lightweight React context state management library","keywords":["react","context","state-management","typescript"],"license":"MIT","readme":"# Selective Context\r\n\r\nA fast and lightweight state management library for React using Context API.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @anupamshandilya28/selective-context\r\n# or\r\nyarn add @anupamshandilya28/selective-context\r\n```\r\n\r\n## Features\r\n\r\n- Lightweight and minimalistic API\r\n- TypeScript support\r\n- Fast updates with selective re-rendering\r\n- Built-in Snackbar notifications\r\n- Zero dependencies\r\n\r\n## Usage\r\n\r\n### 1. Create a store\r\n\r\n```tsx\r\n// store.ts\r\nimport { createFastContext } from '@anupamshandilya28/selective-context';\r\n\r\ntype StoreType = {\r\n  count: number;\r\n  user: {\r\n    name: string;\r\n    isLoggedIn: boolean;\r\n  };\r\n};\r\n\r\nconst initialState: StoreType = {\r\n  count: 0,\r\n  user: {\r\n    name: '',\r\n    isLoggedIn: false,\r\n  },\r\n};\r\n\r\nexport const { Provider, useStore } = createFastContext(initialState);\r\n```\r\n\r\n### 2. Wrap your application with the Provider\r\n\r\n```tsx\r\n// App.tsx\r\nimport React from 'react';\r\nimport { Provider } from './store';\r\nimport Counter from './Counter';\r\nimport UserInfo from './UserInfo';\r\n\r\nfunction App() {\r\n  return (\r\n    <Provider>\r\n      <h1>Fast Context Demo</h1>\r\n      <Counter />\r\n      <UserInfo />\r\n    </Provider>\r\n  );\r\n}\r\n\r\nexport default App;\r\n```\r\n\r\n### 3. Use the store in your components\r\n\r\n```tsx\r\n// Counter.tsx\r\nimport React from 'react';\r\nimport { useStore } from './store';\r\nimport { useSnackbar } from '@anupamshandilya28/selective-context';\r\n\r\nfunction Counter() {\r\n  const [count, setStore] = useStore(state => state.count);\r\n  const { showSnackbar } = useSnackbar();\r\n\r\n  const increment = () => {\r\n    setStore(state => ({ count: state.count + 1 }));\r\n    showSnackbar('Counter incremented!', 'success');\r\n  };\r\n\r\n  const decrement = () => {\r\n    setStore(state => ({ count: state.count - 1 }));\r\n    showSnackbar('Counter decremented!', 'info');\r\n  };\r\n\r\n  return (\r\n    <div>\r\n      <h2>Count: {count}</h2>\r\n      <button onClick={increment}>Increment</button>\r\n      <button onClick={decrement}>Decrement</button>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default Counter;\r\n```\r\n\r\n### Using the Snackbar\r\n\r\nThe package includes a built-in Snackbar system for notifications:\r\n\r\n```tsx\r\nimport { useSnackbar } from '@anupamshandilya28/selective-context';\r\n\r\nfunction MyComponent() {\r\n  const { showSnackbar } = useSnackbar();\r\n  \r\n  const handleClick = () => {\r\n    // Show different types of notifications\r\n    showSnackbar('Operation successful!', 'success');\r\n    // Other options: 'error', 'info', 'warning'\r\n  };\r\n  \r\n  return <button onClick={handleClick}>Show Notification</button>;\r\n}\r\n```\r\n\r\n## API Reference\r\n\r\n### `createFastContext(initialState)`\r\n\r\nCreates a new context with the provided initial state.\r\n\r\n**Returns:**\r\n- `Provider`: React component to wrap your application\r\n- `useStore`: Hook to access and update the store\r\n\r\n### `useStore(selector)`\r\n\r\nHook to select and subscribe to parts of the store.\r\n\r\n**Parameters:**\r\n- `selector`: Function that selects a part of the store\r\n\r\n**Returns:**\r\n- `[selectedState, setStore]`: Array containing the selected state and a setter function\r\n\r\n### `useSnackbar()`\r\n\r\nHook to access the snackbar functionality.\r\n\r\n**Returns:**\r\n- `showSnackbar(message, severity)`: Function to show a notification\r\n- `hideSnackbar()`: Function to hide the current notification\r\n\r\n## License\r\n\r\nMIT ","readmeFilename":"README.md","_rev":"1-2807c9e76ae165ecf6ab9bc8028edef3"}