recoil-nexus
Advanced tools
recoil-nexus - npm Package Compare versions
Comparing version 0.1.5 to 0.1.6
| { | ||
| "name": "recoil-nexus", | ||
| "version": "0.1.5", | ||
| "version": "0.1.6", | ||
| "description": "A small Typescript package to access your Recoil atoms outside of React components.", | ||
@@ -5,0 +5,0 @@ "main": "build/RecoilNexus.js", |
@@ -1,3 +0,5 @@ | ||
| # R E C O I L - N E X U S | ||
| # R E C O I L - N E X U S | ||
| ##### <div align="right">by [Luis Antonio Canettoli Ordoñez](http://luisanton.io)</div> | ||
| If you have been using **[recoil](https://recoiljs.org/)** for a while, you might have faced it: outside React Components, it's not possible to get or update values from atoms. | ||
@@ -26,5 +28,5 @@ | ||
| ```tsx | ||
| import React from 'react'; | ||
| import { RecoilRoot } from "recoil" | ||
| import RecoilNexus from 'recoil-nexus' | ||
| import React from "react"; | ||
| import { RecoilRoot } from "recoil"; | ||
| import RecoilNexus from "recoil-nexus"; | ||
@@ -34,34 +36,27 @@ export default function App() { | ||
| <RecoilRoot> | ||
| <RecoilNexus/> | ||
| <RecoilNexus /> | ||
| {/* ... */} | ||
| </RecoilRoot> | ||
| ); | ||
| }; | ||
| } | ||
| export default App; | ||
| ``` | ||
| ### 2. Use hooks to get/set values: keep in mind that the GET value will return a Promise. | ||
| ### 2. Use the following methods to get/set values passing your atom as a parameter. | ||
| | Method | Returns | | ||
| | :---------- | :-------------------------------------------------------- | | ||
| | `getRecoil` | getter function, returns a promise | | ||
| | `setRecoil` | setter function, pass value to be set as second parameter | | ||
| | Hook | Returns | | ||
| | :------------- | :----------- | | ||
| | `getRecoil` | getter function, returns a promise | | ||
| | `setRecoil` | setter function | | ||
| ```tsx | ||
| // Loading example | ||
| import { loadingState } from '../atoms/loadingState' | ||
| import { getRecoil, setRecoil } from 'recoil-nexus' | ||
| import { loadingState } from "../atoms/loadingState"; | ||
| import { getRecoil, setRecoil } from "recoil-nexus"; | ||
| export default async function toggleLoading() { | ||
| const loading = await getRecoil(loadingState) | ||
| setRecoil(loadingState, !loading) | ||
| const loading = await getRecoil(loadingState); | ||
| setRecoil(loadingState, !loading); | ||
| } | ||
@@ -72,10 +67,9 @@ ``` | ||
| //Loader | ||
| import React from "react" | ||
| import { useRecoilValue } from "recoil" | ||
| import React from "react"; | ||
| import { useRecoilValue } from "recoil"; | ||
| export default function Loader() { | ||
| loading = useRecoilValue(loadingState) | ||
| return loading ? <h3>Loading...</h3> : null | ||
| loading = useRecoilValue(loadingState); | ||
| return loading ? <h3>Loading...</h3> : null; | ||
| } | ||
| ``` | ||
@@ -88,10 +82,11 @@ | ||
| export const loadingState = atom({ | ||
| key: 'LOADING', | ||
| default: false | ||
| }) | ||
| key: "LOADING", | ||
| default: false, | ||
| }); | ||
| ``` | ||
| _____________ | ||
| --- | ||
| ### Credits | ||
| This is a Typescript port + enhancement of [VeepCream](https://github.com/VeepCream)'s [recoil-outside](https://www.npmjs.com/package/recoil-outside). |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.15%
11264
Worsened metrics
- Number of lines in readme file
- decreased by-5.32%
89
No dependency changes