https://github.com/merlinstardust/meteor-react-context

A React context wrapper around all client side Meteor packages so they can be passed in as props.
https://github.com/merlinstardust/meteor-react-context

Last synced: 15 days ago
JSON representation

A React context wrapper around all client side Meteor packages so they can be passed in as props.

• Host: GitHub
• URL: https://github.com/merlinstardust/meteor-react-context
• Owner: merlinstardust
• Created: 2018-07-20T18:52:19.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-07-20T18:57:10.000Z (over 6 years ago)
• Last Synced: 2024-11-12T18:48:36.975Z (2 months ago)
• Language: JavaScript
• Size: 2.93 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Meteor React Context

A React context wrapper around all client side Meteor packages so they can be passed in as props.

## Use

### Wrap app with MeteorPackages.Provider

`MeteorPackages` houses the [React Context](https://reactjs.org/docs/context.html) Provider and Consumer.

`initialContext` contains all client side package exports that are objects or functions.

Import `MeteorPackages` and `initialContext` into your top level component (here `Layout`) and wrap its contents with ``.

```

// Layout.js

import {MeteorPackages, initialContext} from 'meteor/merlin:react-context';

import ContentContainer from './ContentContainer';

const Layout = () => (

  

    

  

);

```

### Use withMeteorPackages on component

`withMeteorPackages` is a higher order component that passes in `meteorPackages` as a prop to the component.

Import `withMeteorPackages` into a container and wrap the component with it.

Then in the component, you can access `props.meteorPackages` (or `this.props.meteorPackages` if your component is class).

```

// ContentContainer.js

import withMeteorPackages from 'meteor/merlin:react-context';

// import {withMeteorPackages} from 'meteor/merlin:react-context';

import Content from './Content';

export default withMeteorPackages(Content);

// Content.js

const Content = ({meteorPackages}) => {

  const {Meteor} = meteorPackages;

  return (

    


  );

};

```


### Custom Context

If you do not want all your packages in context, you can create a custom context and pass that in to the Provider instead.

```

// Layout.js

import {MeteorPackages} from 'meteor/merlin:react-context';

import customContext from './customContext';

import ContentContainer from './ContentContainer';

const Layout = () => (

  

    

  

);

// customContext.js

import {Meteor} from 'meteor/meteor';

// import other packages

const customContext = {

  Meteor,

  // list other packages

};

```