Containator

Generate customizable React Components following the Container/Presenter Pattern.

Installation

For better experience shake before use and install globally 🌏

yarn

yarn global add containator

npm

npm install -g containator

Usage

🚧 Warning: 🚧

Containator will create a folder with your component's name, if the folder is already created it won't create anything since it would be dangerous to overwrite.

Command:

containator <NameOfComponent>

Before you can use it create a containerOptions.json file on the root folder of your project so you can customize the files that are gonna be generated, these are the options:

Name	Description	Type	Default
styles	Choose if you want to get a .css file created and imported to the presenter component or if you want an import to styled-components	enum('styled','css')	css
typescript	If you are using Typescript this option will create interfaces for both the class component on the container and the stateless component on the presenter, also .ts extensions.	boolean	false

Example of containerOptions.json file:

{
  "styles": "css",
  "typescript": true
}
 

Example of usage

1. Go to the folder where you want to create the component:

   nico@coder:~$ cd Components

2. Run containator where 'Awesome' is the name of your component:

   nico@coder:/Components$ containator Awesome

3. Go inside to see the magic ✨

   nico@coder:/Components$ cd Awesome && ls

4. This will give you this folder structure with the default options:

   Awesome
   ├── AwesomeContainer.js
   ├── AwesomePresenter.js
   ├-- AwesomeStyles.css
   ├── index.js

How do the files look like?

With the default options:

index.js:

import AwesomeContainer from "./AwesomeContainer";
export default AwesomeContainer;

AwesomeContainer.js:

import React, { Component } from "react";
import PropTypes from "prop-types";
import AwesomePresenter from "./AwesomePresenter";
 
class AwesomeContainer extends Component {
  static propTypes = {};
  state = {};
  render() {
    return <AwesomePresenter {...this.state} />;
  }
}
export default AwesomeContainer;

AwesomePresenter.js with CSS:

import React from "react";
import PropTypes from "prop-types";
import "AwesomeStyles.css";
 
const AwesomePresenter = ({}) => "Make something awesome!";
 
AwesomePresenter.propTypes = {};
 
export default AwesomePresenter;

AwesomePresenter.js with Styled Components:

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
 
const AwesomePresenter = ({}) => "Make something awesome!";
 
AwesomePresenter.propTypes = {};
 
export default AwesomePresenter;

AwesomePresenter.js with Styled Components:

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
 
const AwesomePresenter = ({}) => "Make something awesome!";
 
AwesomePresenter.propTypes = {};
 
export default AwesomePresenter;

With Typescript:

AwesomeContainer.tsx

import React, { Component } from "react";
import PropTypes from "prop-types";
import AwesomePresenter from "./AwesomePresenter";
 
interface IProps {
  [x: string]: any;
}
 
interface IState {
  [x: string]: any;
}
 
class AwesomeContainer extends Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {};
  }
  static propTypes = {};
  render() {
    return <AwesomePresenter {...this.state} />;
  }
}
 
export default AwesomeContainer;
 

AwesomeContainer.tsx with CSS

import React from "react";
import PropTypes from "prop-types";
import "./SomethingStyles.css";
 
interface IProps {
  [x: string]: any;
}
 
const SomethingPresenter: React.SFC<IProps> = ({}) => (
  <span>Make something awesome!</span>
);
 
SomethingPresenter.propTypes = {};
 
export default SomethingPresenter;
 

Credits

This CLI was made with ❤️ by Nico from Nomad Coders , if you have any problems using it please open a pull request or contact me via slack.

Stay cool 😎, be happy 😬 and make beautiful stuff 💅🏻

~ Nico & Lynn