Hacktoberfest 2020のオープンソース
コンフィギュレーション
react-figma 私たちの旗艦オープンソースプロジェクトは、これはFigmaに反応レンダラです.プロジェクトはすでにハックトーフェストに昨年参加し、新しい貢献を得た.があるcontribution guide それは新人に役立つかもしれません.
テキスト、色などのスタイルをサポート
図Styles 機能は本当に役立つです.プロジェクトで積極的に使用します.
テストスタイル
フィガマAPI スタイルを作成するために、しかし、Figmaはそれを支持しません.もちろん、次のように書きます.
const style = figma.createTextStyle();
style.fontName = "Roboto";
style.fontSize = 16;
...
<Text textStyleId={style.id} />
...
しかし、このコードは反応するネイティブAPIと互換性がありません、そして、プラグインが再構築するならば、テキストスタイルは再作成されます.
Figmaにアクセスする方法getlocexstyles ()
菅345年
tooppaaa
掲示される
こんにちは
この図書館のおかげで.
私は現在ロケールスタイルを使用してビルドする方法を検討しています
私は何とかアクセスしますfigma API コードから.TSと私のすべてのスタイルを作成します.
私は現在、成功せずに私のコンポーネントからそれらを再利用することを望んでいます.私は医者の何かを逃していますか?const Palettes: React.FC<PalettesProps> = ({ ...props }) => {
const theme = useTheme();
const styles = figma.getLocalPaintStyles(); // throw figma is not defined at runtime
return ...
}
const style = figma.createTextStyle();
style.fontName = "Roboto";
style.fontSize = 16;
...
<Text textStyleId={style.id} />
...
tooppaaa
掲示される
こんにちは
この図書館のおかげで.
私は現在ロケールスタイルを使用してビルドする方法を検討しています
私は何とかアクセスしますfigma API コードから.TSと私のすべてのスタイルを作成します.
私は現在、成功せずに私のコンポーネントからそれらを再利用することを望んでいます.私は医者の何かを逃していますか?
const Palettes: React.FC<PalettesProps> = ({ ...props }) => { const theme = useTheme(); const styles = figma.getLocalPaintStyles(); // throw figma is not defined at runtime return ... }
If it's not available yet, happy to help through a PR with your guidance ;)
textstyleサポートの実装 菅344
ネイティブAPIのサポート
React Native compatibility is the one of the most useful features of react-figma. But we haven't implemented all RN APIs yet.
E.g
There are issues about it:
すべての反応ネイティブAPIのスタブ/ダミーAPIを作成する 菅322
実装寸法 菅321
エラー境界またはRedboxの実装
React supporst Error Boundaries components to allow debugging purposes. But React Figma doesn't have this out-of-the-box support:
エラー境界またはRedboxの実装。
菅83
zqwitt
posted on
Should introduce react Error Boundaries components to allow for debugging purposes.
Error Boundaries can have a back up render function that renders a Rectangle and Text component with the error and stack.
Reference: react-sketchapp RedBox component
Should introduce react Error Boundaries components to allow for debugging purposes.
Error Boundaries can have a back up render function that renders a Rectangle and Text component with the error and stack.
Reference: react-sketchapp RedBox component
レスポンスフェッチフック
react-fetch-hook is a React hook to use Fetch AP convenientlyI. There are some unclosed issues:
アボートフェッチ
菅25
slevy85
posted on
Hi thank you for this great react fetch hook,
Is there a way to make the fetch abortable and abort it when component is unmount ?
Thank you
Hi thank you for this great react fetch hook, Is there a way to make the fetch abortable and abort it when component is unmount ?
Thank you
高速要求でISLoad = false
菅24
braco
posted on
If rapid requests are issued, like in an autocomplete scenario, isLoading will be false even when hanging requests are still open.
In other words:
- Setup a series of fetches quickly as the user is typing
- When a new fetch is issued, cancel the previous fetches
- isLoading will === false even though current fetch is still open
- results will still correctly return
If rapid requests are issued, like in an autocomplete scenario, isLoading will be false even when hanging requests are still open.
In other words:
- Setup a series of fetches quickly as the user is typing
- When a new fetch is issued, cancel the previous fetches
- isLoading will === false even though current fetch is still open
- results will still correctly return
レンダーは、依存関係が変更されたときに3回トリガ
菅29
dharkness
posted on
This may be related to #24. Whenever I change the dependencies, I get three rerenders where I only expect to see two.
Expected:
- Change dependencies.
- Render with
isLoading === true, data === null
- Render with
isLoading === false, data === <new-result>
Actual:
- Change dependencies.
- Render with
isLoading === false, data === <previous-result>
- Render with
isLoading === true, data === <previous-result>
- Render with
isLoading === false, data === <new-result>
I don't care so much about data
containing the previous result, and changing just that to null
with no additional changes would be bad. But why am I getting that first rerender which is a copy of the previous call result? I would expect calling the hook with changed dependencies to immediately return with isLoading === true
.
To be clear, everything works okay. The downside is the additional no-op render due to the first result being identical to the previous result. I assume the fetch call has been made by that point, and yet the hook tells me it's not loading. Is there any way to avoid that (step 2 above)?
This may be related to #24. Whenever I change the dependencies, I get three rerenders where I only expect to see two.
Expected:
- Change dependencies.
- Render with
isLoading === true, data === null
- Render with
isLoading === false, data === <new-result>
Actual:
- Change dependencies.
- Render with
isLoading === false, data === <previous-result>
- Render with
isLoading === true, data === <previous-result>
- Render with
isLoading === false, data === <new-result>
I don't care so much about data
containing the previous result, and changing just that to null
with no additional changes would be bad. But why am I getting that first rerender which is a copy of the previous call result? I would expect calling the hook with changed dependencies to immediately return with isLoading === true
.
To be clear, everything works okay. The downside is the additional no-op render due to the first result being identical to the previous result. I assume the fetch call has been made by that point, and yet the hook tells me it's not loading. Is there any way to avoid that (step 2 above)?
メディアフック
react-media-hook is a React Hook for Media Queries.
クエリ作成用のヘルパー
Helpers for creating queries could be a very useful feature. E.g. instead of
const isDark = useMediaPredicate("(prefers-color-scheme: dark)");
次のようになります.const isDark = useDark();
クエリ作成用のヘルパー
菅13
ilyalesik
掲示される
例:useMediaPredicate("(prefers-color-scheme: dark)"
オプション
useMediaPredicate("(prefers-color-scheme: dark)"
その他
他の多くのreposはあなたの貢献を探しています:
怠惰な
/
タッチ絵文字
😀 タッチ絵文字-絵文字ピッカーMacBook Proのタッチバー
タッチ絵文字
Emoji picker for MacBook Pro Touch Bar.
アプリケーションを起動すると ストリップを制御するアイコン
をクリックする アイコンがEmojisでスイープパネルを開きます
特定の絵文字に触れる現在開いているウィンドウに挿入します.
インストール
Emoji picker for MacBook Pro Touch Bar.
アプリケーションを起動すると ストリップを制御するアイコン
をクリックする アイコンがEmojisでスイープパネルを開きます
特定の絵文字に触れる現在開いているウィンドウに挿入します.
インストール
Touch Emoji
アプリケーションフォルダにトラブルシューティング
絵文字タッチは動作しません
アクセスするダニをチェックするか、チェックする → システム選好→ セキュリティとプライバシー→ タブプライバシー→ アクセシビリティ→ トゥケジジー
著者
イリアレシックhttps://github.com/ilyalesik )
このアプリに基づいていますtouch-bar-emojis ガブリエルLorinによってhttps://github.com/gabriellorin ).
スポンサード
View on GitHub
怠惰な / フローファイル
JavaScriptファイルへの変換スクリプト
フローファイル
これは見つけるスクリプトです.js
@フロー注釈を持つファイルは、フロー定義を抽出し、特定のフォルダに保存します.
例として<inputDir>/example.js
// @flow
extract function foo(arg1: number, arg2: string): string {
// some code here
}
will be transformed to <outputDir>/example.js.flow
:
// @flow
declare extract function foo(arg1: number, arg2: string): string;
インストール
Install it with yarn:
yarn add gen-flow-files
NPM :npm i gen-flow-files --save
用途
ビルドプロセスの一部として
scripts": { ... "flow": "flow", "build:flow": "gen-flow-files src --out-dir dist", ... },
transfrom all .js files from src
to .js.flow files and save them at dist
.
コマンドとして
npx gen-flow-files <inputDir> --out-dir <outputDir>
すべてから変換.からのjsファイル<inputDir>
へ.jsフローファイルとそれらを保存.View on GitHub
エフェクター / ものすごい
楽しく愉快なリスト☄️エフェクター
エフェクター☄️
Effector is the reactive state manager.
素晴らしいエフェクタービデオ、記事、パッケージのキュレーテッドリスト.
何かクールな発見?お願いします.contribute !
内容
Effector is the reactive state manager.
記事
コミュニティ
例
react-effector-realworld-example-app - 反応+エフェクターの例アプリ.
process-explorer - 階層システムプロセスビューア.
イルヤシシク / 素晴らしい図
楽しいFigma資源のキュレーテッドリスト
素晴らしい図
Figma is the first interface design tool with real-time collaboration.
統合figmaと開発に焦点を当てた素晴らしいFigmaのもののキュレートされたリスト、例えばfigmaプラグイン、figma rest api.
何かクールな発見?お願いします.contribute !
内容
Figma is the first interface design tool with real-time collaboration.
ビデオ
記事
Design System for Figma — The …
結論
我々はhactoberfest偉大なイニシアチブだと思うが、それはサポートしていません.あなたは貢献者を探して素晴らしいリポジトリを知っていますか?コメントでそれらを提案する!🙌
ハッピーコーディング!
感謝
Anna Egorova - 編集
リンク
Reference
この問題について(Hacktoberfest 2020のオープンソース), 我々は、より多くの情報をここで見つけました https://dev.to/lessmess/our-open-source-in-hacktoberfest-2020-h6dテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol