Ghost Themes
SimpleChat.Support - Open Source Live Chat App
How to use the Meteor sAlert package with React
words - read.

How to use the Meteor sAlert package with React

Update: Now you can use pure React component. Check it out: [code] | [demo]

From Meteor 1.2, we have official React support, which brings about some questions. First of all, which packages from Atmosphere would work with React? Basically if you write a Meteor UI package you should decide which UI framework you want to support, but not all packages written for Blaze are only useful with Blaze.

Let's see how it goes with my simple alerts package. sAlert is a very cool alert and notification package which works only on the client side and it was initially written for Blaze.
If you want to know more about it, go to the website:

sAlert with React

So how we could use sAlert with Meteor-React stack? With this particular package it’s not so complicated. You'll see in a moment. Of course not all packages written for Blaze will suit React. So why is sAlert ok? First of all it’s based on global 'sAlert' namespace, and it uses only one template which you can place in your document body. So the only difficulty here is to manage the sAlert template render.

Ok, let's start from the beginning. I don't want to provide a full React-with-Meteor tutorial here. If you want to learn more, go and read official Meteor with React tutorial:

For our purposes I will start with a new Meteor project. Let's create one:

$ meteor create s-alert-react-demo
$ cd s-alert-react-demo

Now, we need to add React:

$ meteor add react

And of course the s-alert package with the slide effect:

$ meteor add juliancwirko:s-alert
$ meteor add juliancwirko:s-alert-slide

It's that simple! Let's remove all the created files in s-alert-react-demo folder and create startup.jsx, App.jsx and the app.html file in the new client folder.

The most important thing here is to place the sAlert template in the body tag just outside the React rendering container. The app.html file could look like:

    <div id="react-render-target"></div>
    {{> sAlert}}

That's all we need here. All react components will render in react-render-target and sAlert template will live outside it.
We need to initialize the React main App component in the startup.jsx file which could look like:

Meteor.startup(() => {  
    React.render(<App />, document.getElementById('react-render-target'));

We render the main App component in 'react-render-target' container located in the body tag.

Ok, now let's build some demo app in the main React component. It will be 3 buttons which will fire 3 different types of alerts. Our App.jsx file could look like:

App = React.createClass({  
    sAlertWarning() {
        sAlert.warning('This is a warning', {effect: 'slide'});
    sAlertSuccess() {
        sAlert.success('This is a success', {effect: 'slide'});
    sAlertError() {
        sAlert.error('This is an error', {effect: 'slide'});
    render() {
        return (
                <button className="s-alert-trigger" 
                    sAlert Warning
                <button className="s-alert-trigger" 
                    sAlert Success
                <button className="s-alert-trigger" 
                    sAlert Error

That’s it. When you run your Meteor app you should see three buttons. If you click on them there the sAlert should be fired.

As you can see, sAlert, which was written for Blaze, can be used with React too. This is because Meteor can run Blaze and React at the same time. Also if you have a more complicated React structure you can run the Blaze.render() function inside React components. For more details, see the example in the official tutorial where accounts-ui package is integrated with React.

You can see the repository for this demo here:

Let me know how and if you are using sAlert with React in Meteor projects. Or any other packages build for Blaze.
Any ideas and opinions are welcomed.

Have a cool project in mind? -> psd2Meteor - Meteor apps development!


comments powered by Disqus