Functions to help react components to respond to RxJS based observables

Install

npm install

Run tests

npm run test

Usage

This library currently offers 3 functions to connect RxJS to a React component.

rerenderOnChange

Use rerenderOnChange when connecting a BehaviorSubject to a React component via the componentDidMount lifecycle event. rerenderOnChange will take care of updating your component when the BehaviorSubject changes, as well as unsubscribing when the component unmounts.

Example:

class MyComponent extends React.Component<{ behaviorSubject: BehaviorSubject<string> }> {
    componentDidMount() {
        rerenderOnFieldChange(this, this.props.behaviorSubject);
    }

    render() {
        return <div>{this.props.behaviorSubject.getValue()}</div>;
    }
}

...

const myValue = new BehaviorSubject<string>('initial value');
<MyComponent behaviorSubject={myValue}/>

myValue.next('updated value');

useBehaviorSubject

Use useBehaviorSubject when connecting a BehaviorSubject to a React functional component just as you would a typical React hook. useBehaviorSubject will return the value and a change dispatcher, similar to react hook, allowing you to manipulate the value outside of the React component.

Example:

const MyComponent: React.FC<Props> = ({myBehaviorSubject}) => {
  const [value, setValue] = useBehaviorSubject(myBehaviorSubject);
  
  return (
    <div>
     {value}

      <button onClick={() => setValue('updated value')}>Click Me</button>
    </div>
  )
};

...

const myValue = new BehaviorSubject<string>('initial value');
<MyComponent behaviorSubject={myValue}/>

// Clicking button will make myValue.getValue() equal "updated value"

myValue.next('updated value'); // will cause MyComponent to rerender 

useStore

Use useStore when connecting a "Store" to a React functional component just as you would a typical React hook. A store can be an array of javascript objects, where updating an entity in place may cause React to ignore the update because of it does not check objects with deep equals. useStore will return the value and a change dispatcher, similar to react hook, allowing you to manipulate the value outside of the React component.

Internally, this is different from useBehaviorSubject because the observable's value is converted into a string to encourage react to rerender.

Example:

type Props = {myStore: BehaviorSubject<SomeBigObject[]>};
const MyComponent: React.FC<Props> = ({myStore}) => {
  const [values, setValues] = useStore(mySotre);
  
  return (
    <div>
      <ul>{values.map((v, i) => <li key={i}>{v}</li>)}</ul>

      <button onClick={() => setValue([...values, new SomeBigObject()])}>Click Me</button>
    </div>
  )
};

...

const myStore = new BehaviorSubject<SomeBigObject[]>([{foo: 'bar'}, {foo: 'baz'}]);
<MyComponent behaviorSubject={myStore}/>

// Clicking button will make myStore.getValue() add another object to myStore.

myStore.next([]); // will cause MyComponent to rerender 

Author

👤 Bryan Neva [email protected]

• Github: @bryanneva

🤝 Contributing

Contributions, issues and feature requests are welcome!Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2019 Bryan Neva [email protected]. This project is ISC licensed.

This README was generated with ❤️ by readme-md-generator