Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/boenfu/hexo-renderer-react-styled
Hexo renderer by react & styled-components
https://github.com/boenfu/hexo-renderer-react-styled
hexo hexo-renderer react styled-components
Last synced: 11 days ago
JSON representation
Hexo renderer by react & styled-components
- Host: GitHub
- URL: https://github.com/boenfu/hexo-renderer-react-styled
- Owner: boenfu
- License: mit
- Created: 2022-04-08T13:12:35.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-04-16T14:54:08.000Z (over 2 years ago)
- Last Synced: 2024-12-11T10:40:24.872Z (14 days ago)
- Topics: hexo, hexo-renderer, react, styled-components
- Language: TypeScript
- Homepage:
- Size: 196 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/gregberge/svgr)## Example
- theme directory example
```bash
βββ your-theme
βββ layout
β βββ components
β β βββ header.tsx
β β βββ index.ts
β βββ index.tsx
β βββ layout.tsx
βββ tsconfig.json
```- page view example
```tsx
// 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 = props => {
const {page} = props;return (
);
};export default Component;
```**Try it ?π**
## Usage
### Installation:
```bash
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.
```ts
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.
```ts
declare module '*.css' {
const text: string;
export default text;
}
```usage example
```ts
import markdownCSS from './markdown.css';const MarkdownContent = styled.div`
${markdownCSS}
`;
```## Who Use
- [hexo-theme-wanghu](https://github.com/boenfu/hexo-theme-wanghu) - βεΏδΉβοΌ δ»Ώη₯δΉδΈ»ι’ οΌ
## License
MIT License.