-
Notifications
You must be signed in to change notification settings - Fork 88
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9b15971
commit 574a124
Showing
2 changed files
with
170 additions
and
51 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
================= | ||
Providers & Hooks | ||
================= | ||
|
||
.. meta:: | ||
:description: Develop apps using the Providers and Hooks available in the @realm/react library. | ||
:keywords: Realm, Javascript SDK, React, code example | ||
|
||
.. facet:: | ||
:name: genre | ||
:values: reference | ||
|
||
.. facet:: | ||
:name: programming_language | ||
:values: javascript | ||
|
||
.. contents:: On this page | ||
:local: | ||
:backlinks: none | ||
:depth: 2 | ||
:class: singlecol | ||
|
||
|
||
The ``@realm/react`` library offers custom React components called Providers to simplify the app | ||
development process. | ||
|
||
Atlas App Services offers pathways that support user creation, user authentication, and data | ||
management. However, manually integrating these processes into your app introduces a new layer | ||
of complexity. Instead of manually integrating these features, you can use the the Providers | ||
to manage the logic needed to run your app. | ||
|
||
- ``RealmProvider`` grants access to the configured realm | ||
- ``AppProvider`` grants access to the App Services App | ||
- ``UserProvider`` grants access to the logged-in user object | ||
|
||
The Providers are available to all frameworks used to build with the JavaScript SDK. | ||
|
||
Components and Hooks | ||
-------------------- | ||
|
||
Providers are specialized React components, so you can interact with them as you would any other | ||
component. As with components, you can use hooks to access states from Providers. | ||
|
||
Components | ||
~~~~~~~~~~ | ||
|
||
Components are the basic building blocks of React applications and resemble JavaScript | ||
functions. They allow you to separate your app’s functionality and views into smaller chunks | ||
you can manipulate and assemble to create the complete app. You call components using html | ||
opening and closing tags, and they take parameters called Props as input. | ||
|
||
You can nest components within another components tags, creating a parent-child relationship between | ||
them. The props passed into the parent component help create the context that its child | ||
components need to execute their logic. Child components can access this context using hooks. | ||
|
||
Hooks | ||
~~~~~ | ||
|
||
Hooks act as functions you can use to access states in your app. React has built-in hooks you | ||
can import and use in any component. The ``@realm/react`` library also has custom hooks for each | ||
provider you can import. You can use a Provider’s hooks within its component and any of its | ||
child components. There are two important rules to consider when working with hooks: | ||
|
||
- Hooks can only be used at the top level of a React component. | ||
- Hooks can only be called in a React component or a custom hook, not in regular JavaScript | ||
functions. | ||
|
||
Using Providers | ||
--------------- | ||
|
||
To make your Providers context available to your entire app, you can create an App Wrapper by | ||
nesting the Providers in each other. You can then nest any of your custom components in this wrapper. | ||
Most applications built using the ``@realm/react`` library assemble their custom components in | ||
an ``App`` component for better organization. | ||
|
||
.. literalinclude:: /examples/generated/react/providers-hooks.snippet.use-providers.js | ||
|
||
You *must* nest the Providers as shown when making a wrapper to ensure each Provider can | ||
access the context it needs to function. | ||
|
||
To use a state in a component you’re creating, call the related hook at the top of your | ||
component definition and save the return value to a variable. You can then use this variable | ||
containing the state throughout your component. | ||
|
||
``CODE EXAMPLE COMING`` | ||
|
||
Props and Hooks | ||
--------------- | ||
|
||
For more detail about configuration each provider and to see the props and hooks available for | ||
each, please refer their the API references: | ||
|
||
- :ref:`react-realm-provider` | ||
- :ref:`react-user-provider` | ||
- :ref:`react-app-provider` |