Giter VIP home page Giter VIP logo

meteor-blaze-react-component's Introduction

blaze-react-component Circle CI

Use Blaze templates inside of React

import React from 'react';
import Blaze from 'meteor/gadicc:blaze-react-component';

const App = () => (
  <div>
    <Blaze template="itemsList" items={items} />
  </div>
);

Re-exporting

Provided here for those that want it. Personally I think it's clearer to use the <Blaze /> component directly.

import React from 'react';
import Blaze from 'meteor/gadicc:blaze-react-component';

const atForm = (props) => <Blaze {...props} template="atForm" />;

export { atForm };        // import { atForm } from 'myPackage';

You can also use a default export if you prefer (and your package has none of it's own exports, and just a single template).

Optional and old Meteor support (no ecmascript)

Blaze package authors, read this.

You might want your package to provide optional React support. To be honest, I feel it's clearer to rather give instructions to use the <Blaze /> component, as that makes it very clear what's going on. However, if you plan to offer native React support in the future, this is a good way to protect your users from future changes:

package.js:

api.use('gadicc:[email protected]', 'client', { weak: true });
api.addFiles('somefile.js', 'client');
api.export('YourReactComponent', 'client');

somefile.js:

YourReactComponent = null;
if (Package['gadicc:blaze-react-component']) {
  var blazeToReact = Package['gadicc:blaze-react-component'].blazeToReact;
  YourReactComponent = blazeToReact('YourBlazeTemplate');
}

And then, optionally, but for good practice, tell your users to:

import { YourReactComponent } from 'meteor/yourname:yourpackage';

// And use it as expected, with attributes just like in Blaze
const App = () => {
  <div>
    <YourReactComponent textArg="foo" blazeArg=bar />
  </div>
};

Credits

meteor-blaze-react-component's People

Contributors

gadicc avatar zach-sim avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.