https://github.com/gutenye/gureact
https://github.com/gutenye/gureact
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/gutenye/gureact
- Owner: gutenye
- Created: 2020-12-17T08:57:24.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-03-13T13:37:40.000Z (about 4 years ago)
- Last Synced: 2025-02-15T00:45:04.741Z (4 months ago)
- Language: JavaScript
- Size: 642 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## gureact
[documentation](https://60003f79acfc0b00219273be-qbiusrtdmc.chromatic.com/?path=/docs/introduction--page)
Philosophy: each compnent is independent.
- package.json.bak // create react app src/gureact can not detect a.tsx as a typescript file
Temp fix from https://github.com/storybookjs/storybook/issues/13593#issuecomment-757427590
Don't forget to remove it after it's get fixed
```
import StepForm from 'gureact/react-hook-form/StepForm'
```
## With git submodule
```
git submodule add [email protected]:gutenye/gureact src/gureact
```
## Install
```
$ yarn add gureact
MDC: yarn add material-components-web react-material-components-web
Antd: yarn add antd
# src/_variables.scss
$mdc-theme-primary: #3b5999;
# webpack.config.js
{
loader: 'sass-loader',
options: {
includePaths: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')]
}
}
```
```
# .babelrc
plugins: [
['transform-imports', {
'gureact': { transfrom: 'gureact/lib/core/${member}/${member} },
'gureact/antd': { transfrom: 'gureact/lib/antd/${member}/${member} },
import { Button } from 'gureact'
yarn add lodash styled-components classnames react-icons recompose react-router react-router-dom
```
### Setup global styles
```
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a, a:hover, a:visited {
text-decoration: none;
}
```
```
Setup react-icons
class App extends React.Component {
static childContextTypes = {
reactIconBase: PropTypes.object
}
getChildContext() {
return {
reactIconBase: {
size: 32,
className: 'icon',
}
}
}
```