use react-aria with other state management library?

[fnick851]

I wonder if I can use react-aria with, for example, xstate or redux?

I guess I don't understand what's the purpose of react-stately. Is it just a companion library for react-aria? Will it interfere with other state management library?

[reidbarber]

You should be able to, as long as the state you pass into the React Aria hook is the correct type.

Example:

import {useSwitch} from '@react-aria/switch'
import {useMyCustomToggleState} from 'whatever-package';

function Switch(props) {
  let state = useMyCustomToggleState(props); // instead of useToggleState. Works as long as it's return type is ToggleState
  let ref = React.useRef();
  let {inputProps} = useSwitch(props, state, ref);
...

I think resolving these types may be too much work to make it worth it though, but I would be curious to hear what your use case is.

Edit:

Also to clarify, React Stately is intended to provide state management for your design system components, not your actual apps that use your design system components. It won't interfere with any other state management libraries you're using to build your apps. In fact, the users of your design system components won't even be aware of React Stately. The above was just to mention that you could use your own state management library when building your components with React Aria, if you didn't want to use React Stately.

Here is an example of a Switch that uses useSwitch, and XState for state management.

https://codesandbox.io/s/useswitch-xstate-qijgx?file=/src/App.js

[fnick851]

@reidbarber It does clear things up for me. Thanks!

[AlexGalays]

I also don't see the point of these state hooks as implementation detail. We can only pass initialItems so if the items (or their order) changes from the outside, the internal list data won't see it or bother to sync its own internal state. In addition, any operation done on the list data is opaque for the outside word so we can't sync our primary data source either.

[snowystinger]

can you provide an example of what you're trying to do? I'm not sure how it relates to this discussion thread. Are you trying to write your own stately hook? or are you having trouble using one of the stately hooks?

[reidbarber]

@AlexGalays it sounds like you may be talking about useListData/useTreeData (since you mentioned initialItems). You definitely don't have to use these hooks to manage data (although we do in the docs for convenience). You just need to provide collection components with items, and optionally some others for disabled items, selection, and loading states.

[AlexGalays]

Alright, I thought you were referring to those indeed :)