Giter VIP home page Giter VIP logo

atellier's Introduction

atellier

Join the chat at https://gitter.im/scup/atellier

Dependencies Status Build Status Code Climate npm version By Sprinklr Gitter

A React component that works like a preview of other components. An excellent tool to show how your component works and looks with. Easy to install and configure, you can have a router in your project with Atellier and can interact with any component.

Imagine a universe in which you may have tools (components) tested in real time! This is amazing!

Online Demos

Install

npm install -g react-atellier

Usage

Import Atellier

For releases: > v0.1.0 (NEWER)

...
import ReactAtellier from 'react-atellier';

For releases: <= v0.0.14

...
var ReactAtellier = require('react-atellier')( React );

Import your component

import myComponent from 'myComponent';

const componentList = [{
  componentName : myComponent.displayName,
  component : myComponent
}];

OR your component library

import myComponents from 'myComponent';

const componentList = myComponents.map( (comp)=> {
    return {
      componentName : comp.displayName,
      component : comp
    }
})

pass your components to Atellier over components prop.

var AtellierWrapper = React.createClass({
  render: function() {
    return (
      <ReactAtellier components={componentList} />
    );
  }
});

and then you need to render the Atellier somewhere in your application.

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="atellier" component={AtellierWrapper}/>
    </Route>
  </Router>
), document.body)

Todo

  • Atellier CLI (wip)
  • Import components and live update
  • Move components in stage

Team

Contributors

Contribute

Come with us to make an awesome Atellier tool to run components in live ambient.

Now, if you do not have technical knowledge and also have intend to help us, do not feel shy, click here to open an issue and collaborate their ideas, the contribution may be a criticism or a compliment (why not?)

We have some conventions to contribute to the Atellier project, see more information in our CONTRIBUTING.md. So please, read this before send to us a pull requests.

Want help?

License

React Atellier is released under the MIT license.

atellier's People

Contributors

agutoli avatar joaoneto avatar guisouza avatar sompylasar avatar mitsuishihidemi avatar carloshpds avatar allegretti avatar dalssoft avatar noisae avatar gitter-badger avatar

Watchers

James Cloos 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.