create-react-styled-component-cli
v0.0.1
Published
Create React component width an associated styled-component file
Downloads
6
Readme
Create React Component
This create-react-styled-component
CLI will create a JSX functional component
and a styled-component file. We also included some custom imports for
design tokens and config files in the styled-component to help you on your way.
You need to have installed styled-components
in your own project to use this package.
How to use:
create-react-styled-component <name> [option]
Options:
-V, --version output the version number
-t, --tag [type] tag type [default: div]
-h, --help output usage information
Install
npm i -g create-react-styled-component-cli
Example
create-react-styled-component Link -t a
Will create this structure
Link
|-- Link.jsx
|-- style.js
Content of Link.jsx
// Link component
// ----------------------------------------------------------------------------
import React from "react";
import { string, bool, oneOf, node } from "prop-types";
import { LinkStyle } from "./styles";
const propTypes = {
/** Add prop-types here */
propName: string
};
const defaultProps = {
/** Add default prop-types here */
propName: "your-value-here"
};
const Link = props => {
const { children, ...rest } = props;
return <LinkStyle {...rest}>{children}</LinkStyle>;
};
export default Link;
Link.propTypes = propTypes;
Link.defaultProps = defaultProps;
Content of styles.js
// Style for Link component
// ----------------------------------------------------------------------------
import styled from "styled-components";
// Tokens
import { TOKEN_NAME } from "../../utilities/tokens/TOKEN_NAME";
// Configs
import { space } from "../../utilities/config/space";
import { typeScale } from "../../utilities/config/space";
export const LinkStyle = styled.a`
/* Add style here */
`;