{"_id":"@trust0/ridb-react","_rev":"119-b678ea9010369ccd2ace5d157cfa133e","name":"@trust0/ridb-react","dist-tags":{"rc":"1.4.23-rc.0","latest":"1.5.0"},"versions":{"1.0.0-rc.1":{"name":"@trust0/ridb-react","version":"1.0.0-rc.1","author":{"name":"elribonazo@gmail.com"},"_id":"@trust0/ridb-react@1.0.0-rc.1","maintainers":[{"name":"elribonazo","email":"elribonazo@gmail.com"}],"homepage":"https://github.com/trust0-project/RIDB#readme","bugs":{"url":"https://github.com/trust0-project/RIDB/issues"},"dist":{"shasum":"ef4a0f407358a0427695dbda17e27659cb794583","tarball":"https://registry.npmjs.org/@trust0/ridb-react/-/ridb-react-1.0.0-rc.1.tgz","fileCount":5,"integrity":"sha512-nnb4rwGzgWQhO6yWKYnX+ixFbaSu0r+zRRfgazreCF35aRHsaU/cIQbAjczxQKWp3Pewn3ggXXLgmHNG2FcfAA==","signatures":[{"sig":"MEYCIQDAFYHXntTuj4DtVoq3/kDQntGEV0JH9txURJHbB454EgIhAK7KYQ+I+/CJXl/0oAAkfCaJYI7/RmsauGYZHOnk0M36","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6636},"main":"./build/index.js","type":"module","gitHead":"909475942cb20564a88e52ddf6682ca6b01ea86e","scripts":{"test":"vitest --run","build":"rm -rf build && npm run types && node ./esbuild.js","clean":"rm -rf build node_modules","types":"npm run types:default","types:default":"npx tsc","prepublishOnly":"npm run build"},"typings":"./build/index.d.ts","_npmUser":{"name":"elribonazo","email":"elribonazo@gmail.com"},"repository":{"url":"git+https://github.com/trust0-project/RIDB.git","type":"git"},"_npmVersion":"10.9.2","description":"
A secure light-weight and dependency free database wrapper for the web.
\n \n \n \n
A secure light-weight and dependency free database wrapper for the web.
\n\n
\n \n \n \n \n
\n\n## Documentation\nThis package provides everything you need to use RIDB with React easily\n\n## Install\n```\nnpm i @trust0/ridb-react\n```\n\n## Usage\n```typescript\nimport React from 'react'\nimport { RIDBDatabase, useRIDB } from '@trust0/ridb-react'\nimport { SchemaFieldType } from '@trust0/ridb'\n```\n\nCreate your schemas and type them for better inference.\n\n```typescript\nconst users = {\n version: 0 as const,\n primaryKey: 'id',\n type: SchemaFieldType.object,\n properties: {\n id: {\n type: SchemaFieldType.string,\n maxLength: 60\n }\n }\n} as const\nconst schemas = {\n users: users\n}\ntype DatabaseSchemas = typeof schemas;\n```\n\nNow just create your component and use the `useRIDB` hook to get the database instance.\n\n```typescript\nconst MyComponent: React.FC = () => {\n const db = useRIDB();\n const [isDbReady, setIsDbReady] = React.useState(false);\n\n React.useEffect(() => {\n if (!isDbReady) {\n db.start()\n .then(() => {\n setIsDbReady(true);\n })\n .catch((err) => {\n console.error(err);\n });\n }\n }, [isDbReady]);\n\n if (!db) {\n return
No database available
;\n }\n\n if (!isDbReady) {\n return
Loading...
;\n }\n\n return (\n
My Component
\n );\n};\n```\n\nWrap your component with the `RIDBDatabase` component to provide the database instance to your component.\n\n```typescript\n\n \n\n```\n\nAll the database methods and operations from RIDB are supported, for more details check the [RIDB documentation](https://github.com/trust0-project/RIDB/blob/main/docs/@trust0/ridb/README.md)","readmeFilename":"README.md"}
![\"JavaScript](\"https://cdn.jsdelivr.net/gh/trust0-project/ridb@latest/docs/logo.svg\"){kind=logo}
![\"JavaScript](\"../../resources/ridb-dark.svg\")
\n ![](\"https://img.shields.io/github/v/release/trust0-project/ridb?color=%23ff00a0&include_prereleases&label=version&sort=semver&style=flat-square\")
![](\"https://img.shields.io/npm/types/rxdb?style=flat-square\")
![](\"https://img.shields.io/github/license/trust0-project/ridb?style=flat-square\")
![](\"https://img.shields.io/npm/dm/@trust0/ridb?color=c63a3b&style=flat-square\")