Skip to content

Commit cc64a7e

Browse files
hunghg255hunghg255
committed
init
0 parents  commit cc64a7e

17 files changed

+37608
-0
lines changed

‎.github/workflows/publish.yml

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
name: Publish
2+
on:
3+
push:
4+
branches:
5+
- 'master'
6+
7+
concurrency: ${{ github.workflow }}-${{ github.ref }}
8+
9+
jobs:
10+
build:
11+
runs-on: ubuntu-latest
12+
steps:
13+
- uses: actions/checkout@v3
14+
- uses: actions/setup-node@v3
15+
with:
16+
node-version: 16
17+
- run: npm install
18+
- name: Create Release Pull Request or Publish
19+
id: changesets
20+
uses: changesets/action@v1
21+
with:
22+
publish: npm run release
23+
env:
24+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
25+
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
*.log
2+
.DS_Store
3+
node_modules
4+
.cache
5+
dist

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2023 hunghg255
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# fast-react-context
2+
3+
## Make to react context faster
4+
5+
6+
[![npm version](https://badge.fury.io/js/fast-react-context.svg)](https://badge.fury.io/js/fast-react-context) [![npm](https://img.shields.io/npm/dw/fast-react-context.svg?logo=npm)](https://www.npmjs.com/package/fast-react-context) [![npm](https://img.shields.io/bundlephobia/minzip/fast-react-context)](https://www.npmjs.com/package/fast-react-context)
7+
[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)
8+
9+
## Installation
10+
11+
[![NPM](https://nodei.co/npm/fast-react-context.png?compact=true)](https://nodei.co/npm/fast-react-context/)
12+
13+
#### To install the latest stable version:
14+
15+
```
16+
npm install --save fast-react-context
17+
```
18+
19+
#### Basic usage:
20+
21+
```tsx
22+
import React, { Component } from 'react';
23+
import createFastContext from 'fast-react-context';
24+
25+
const { Provider, useStore } = createFastContext({
26+
title: 'App Fast Context',
27+
});
28+
29+
const ChildComponent = () => {
30+
const [title] = useStoreTitle((store) => store.title);
31+
32+
return <h5>{title}</h5>;
33+
}
34+
35+
export default const App {
36+
37+
return <Provider>
38+
<ChildComponent />
39+
</Provider>;
40+
}
41+
```

‎example/.npmignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
.cache
3+
dist

‎example/index.css

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
body {
2+
font-family: Arial, Helvetica, sans-serif;
3+
padding: 1rem;
4+
}
5+
6+
.container {
7+
margin-top: 0.5rem;
8+
padding: 0.5rem 1.5rem;
9+
border: 1px solid #ccc;
10+
}
11+
12+
.field, .value {
13+
padding: 0.5rem;
14+
}

‎example/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Playground</title>
8+
</head>
9+
10+
<body>
11+
<div id="root"></div>
12+
<script src="./index.tsx"></script>
13+
</body>
14+
</html>

‎example/index.tsx

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import * as React from 'react';
2+
import * as ReactDOM from 'react-dom';
3+
4+
import createFastContext from '../src/index';
5+
6+
import './index.css';
7+
8+
9+
const { Provider, useStore } = createFastContext({
10+
first: '',
11+
last: '',
12+
});
13+
14+
const { Provider: ProviderTitle, useStore: useStoreTitle } = createFastContext({
15+
title: 'App Fast Context',
16+
});
17+
18+
const TextInput = ({ value }: { value: 'first' | 'last' }) => {
19+
const [fieldValue, setStore] = useStore((store) => store[value]);
20+
return (
21+
<div className='field'>
22+
{value}:{' '}
23+
<input
24+
value={fieldValue}
25+
onChange={(e) => setStore({ [value]: e.target.value })}
26+
/>
27+
</div>
28+
);
29+
};
30+
31+
const Display = ({ value }: { value: 'first' | 'last' }) => {
32+
const [fieldValue] = useStore((store) => store[value]);
33+
34+
return (
35+
<div className='value'>
36+
{value}: {fieldValue}
37+
</div>
38+
);
39+
};
40+
41+
const FormContainer = () => {
42+
return (
43+
<div className='container'>
44+
<h5>FormContainer</h5>
45+
<TextInput value='first' />
46+
<TextInput value='last' />
47+
</div>
48+
);
49+
};
50+
51+
const DisplayContainer = () => {
52+
return (
53+
<div className='container'>
54+
<h5>DisplayContainer</h5>
55+
<Display value='first' />
56+
<Display value='last' />
57+
</div>
58+
);
59+
};
60+
61+
const ContentContainer = () => {
62+
return (
63+
<div className='container'>
64+
<h5>ContentContainer</h5>
65+
<FormContainer />
66+
<DisplayContainer />
67+
</div>
68+
);
69+
};
70+
71+
const Title = () => {
72+
const [title] = useStoreTitle((store) => store.title);
73+
74+
return <h5>{title}</h5>;
75+
};
76+
77+
function App() {
78+
return (
79+
<Provider>
80+
<div className='container'>
81+
<ProviderTitle>
82+
<Title />
83+
</ProviderTitle>
84+
<ContentContainer />
85+
</div>
86+
</Provider>
87+
);
88+
}
89+
90+
ReactDOM.render(<App />, document.getElementById('root'));

0 commit comments

Comments
 (0)