0.0.24 • Published 3 years ago
react-awesome-snippets v0.0.24
react-snippets
工作中总结的一些 react 相关小组件、工具的代码集合
使用
有两种方式可以使用本代码组件:
1. 通过 npm 安装依赖
该方式代码已经经过 babel、sass 转换为普通的 es5 和 css 代码,只需要你的项目支持 webpack,以及具有 css-loader、file-loader 即可。
# 安装全部
npm install react-awesome-snippets --save
# 安装子模块
npm install react-awesome-snippets-bgm --save
npm install react-awesome-snippets-preload --save
npm install react-awesome-snippets-create-pic --save
npm install react-awesome-snippets-blink --save
npm install react-awesome-snippets-classnames --save
npm install react-awesome-snippets-with-transition --save
项目中调用(以 BGM 组件示例):
import React from 'react';
import { render } from 'react-dom';
import bgmp3 from 'YOUR_MEDIA_DIR/bgm.mp3';
import { BGM, CreatePic, Preload } from 'react-awesome-snippets';
// or
import BGM from 'react-awesome-snippets-bgm';
render(<BGM src={bgmp3} />, document.getElementById('root'));
运行环境要求:
- webpack
- css-loader
2. 直接在项目中使用原始组件代码
你需要将 src/components
下你需要使用的组件复制进你的项目中,按照通用方式引用即可。确保该位置的代码会正确经过 webpack-babel-sass 的转换编译。
项目中调用(以 BGM 组件示例):
import React from 'react';
import { render } from 'react-dom';
import bgmp3 from 'YOUR_MEDIA_DIR/bgm.mp3';
import BGM from 'YOUR_COMPONENTS_DIR/BGM';
render(<BGM src={bgmp3} />, document.getElementById('root'));
运行环境要求:
- webpack
- Babel -
babel-preset-react-app@^3.1.0
- sass-loader
目录
更具体的使用说明请参考具体组件页面说明
组件
- CreatePic 合成片段图片或文字到一张图片上
- BGM h5 背景音乐
- Preload 图片资源处预加载
- BlinkAnimation 生成图片帧动画
- AnimatedRouter 便捷的路由动画切换组件
工具
- classnames 快速生成className
- withTransition 快速生成cssTransition组件
0.0.24
3 years ago
0.0.23
4 years ago
0.0.22
6 years ago
0.0.21
6 years ago
0.0.20
6 years ago
0.0.19
6 years ago
0.0.18
6 years ago
0.0.17
6 years ago
0.0.15
6 years ago
0.0.14
6 years ago
0.0.13
6 years ago
0.0.12
6 years ago
0.0.11
6 years ago
0.0.10
6 years ago
0.0.9
6 years ago
0.0.8
6 years ago
0.0.7
6 years ago
0.0.6
6 years ago
0.0.5
6 years ago
0.0.4
6 years ago
0.0.3
6 years ago
0.0.2
6 years ago
0.0.1
6 years ago