hexo-renderer-react-styled
TypeScript icon, indicating that this package has built-in type declarations

0.12.0Β β€’Β PublicΒ β€’Β Published

hexo-renderer-react-styled

😎 wow ~ use react + style-components write your hexo theme

Features

  • zero configure
  • import sub components directly
  • file extensions support .tsx .ts .jsx .svg .css
  • auto transform svg source file to react component by svgr

Example

  • theme directory example
└── your-theme
    β”œβ”€β”€ layout
    β”‚   β”œβ”€β”€ components
    β”‚   β”‚   β”œβ”€β”€ header.tsx
    β”‚   β”‚   └── index.ts
    β”‚   β”œβ”€β”€ index.tsx
    β”‚   └── layout.tsx
    └── tsconfig.json
  • page view example
// index.tsx
import React, {FC} from 'react';
import styled from 'styled-components';
// import directly
import {Posts} from './components';
// see usage/svg
import Github from './icons/github.svg';
// see usage/css
import MarkdownCSS from './css/markdown.css';

const Index = styled.div`
  // ... css
`;

const Main = styled.div`
  // ... css
  ${MarkdownCSS}
`;

const Sidebar = styled.div`
  // ... css
`;

// Perfect type hint
const Component: FC<HexoComponentProps> = props => {
  const {page} = props;

  return (
    <Index>
      <Main>
        <Posts posts={page.posts} />
      </Main>
      <Sidebar>
        <Github />
      </Sidebar>
    </Index>
  );
};

export default Component;

Try it ?πŸ™Š

Usage

Installation:

yarn add hexo-renderer-react-styled # Or npm install --save hexo-renderer-react-styled

That's all, hexo will auto load

SVG

If need import ".svg" file, add module declare file for your project.

declare module '*.svg' {
  const fc: (props: any) => any;
  export default fc;
}

svgComplier will replace #000/#000000 to currentColor by default

CSS

If need import ".css" file, add module declare file for your project.

declare module '*.css' {
  const text: string;
  export default text;
}

usage example

import markdownCSS from './markdown.css';

const MarkdownContent = styled.div`
  ${markdownCSS}
`;

Who Use

  • hexo-theme-wanghu - β€œεΏ˜δΉŽβ€οΌˆ δ»ΏηŸ₯乎主钘 οΌ‰

License

MIT License.

Package Sidebar

Install

npm i hexo-renderer-react-styled

Weekly Downloads

11

Version

0.12.0

License

MIT

Unpacked Size

82.9 kB

Total Files

52

Last publish

Collaborators

  • boenfu