Dynamic React Applications

Made Easy.

Features

Completely Customizable

Customize your admin panel and data structure for your needs.

2 Min Setup

Wrap your app with <OrkanProvider/> and you are set.

Real Time Previews

The admin panel opens onto your app so you can see your changes as you make them.

Light and Efficient

Thin layer provides an ultra fast integration between React and and Firebase.

Tight Security

Permissions based OAuth Authentication via all popular providers.

React & Firebase Driven

solid foundation driven by modern technology.

Examples

Rendering a simple value

The <Value/> component will render any primitive value by it’s Firebase path.
Learn more
import {Provider, Collection} from 'orkan';

class App extends React.Component {
   render() {
      return (
         <div>
             <Value path='home/greeting'/>
         </div>
      );
   }
}

ReactDOM.render(
	<Provider firebaseConfig={{...}}>
		<App/>
	</Provider>,
	document.getElementById('root')
);

Rendering a collection

The <Collection/> component will render a collection by it’s Firebase path.
Learn more
import {Provider, Collection} from 'orkan';

class App extends React.Component {
	render(){
		return (
			<div>
				<Collection
					path='blog/posts'
					renderItem={post => <Post data={post}/>}/>
			</div>
		);
	}
}

ReactDOM.render(
	<Provider firebaseConfig={{...}}>
		<App/>
	</Provider>,
	document.getElementById('root')
);

Old problem, new solution.

Get Started