{"patch":"diff --git a\/packages\/react-interactions\/accessibility\/README.md b\/packages\/react-interactions\/accessibility\/README.md\nnew file mode 100644\nindex 0000000000..9e910b1877\n--- \/dev\/null\n+++ b\/packages\/react-interactions\/accessibility\/README.md\n@@ -0,0 +1,78 @@\n+# `react-interactions\/accessibility`\n+\n+*This package is experimental. It is intended for use with the experimental React\n+Scope API that is not available in open source builds.*\n+\n+Scopes allow for querying of the internal React sub-tree to collect handles to\n+host nodes. Scopes also have their own separate tree structure that allows\n+traversal of scopes of the same type.\n+\n+The core API is documented below. Documentation for individual Accessibility Components\n+can be found [here](.\/docs).\n+\n+## React Scopes\n+\n+Note: React Scopes require the internal React flag `enableScopeAPI`.\n+\n+When creating a scope, a query function is required. The query function is used\n+when collecting host nodes that match the criteria of the query function.\n+\n+```jsx\n+\/\/ This query function only matches host nodes that have the type of \"div\"\n+const queryFunction = (type: string, props: Object): boolean => {\n+ if (type === 'div') {\n+ return true;\n+ }\n+ return false;\n+};\n+\n+\/\/ Create the scope with the queryFunction above\n+const DivOnlyScope = React.unstable_createScope(queryFunction);\n+\n+\/\/ We can now use this in our components. We need to attach\n+\/\/ a ref so we can get the matching host nodes.\n+function MyComponent(props) {\n+ const divOnlyScope = useRef(null);\n+ return (\n+ \n+

DIV 1<\/div>\n+

DIV 2<\/div>\n+

DIV 3<\/div>\n+ <\/DivOnlyScope>\n+ );\n+}\n+\n+\/\/ Using the ref, we can get the host nodes via getScopedNodes()\n+const divs = divOnlyScope.current.getScopedNodes();\n+\n+\/\/ [

DIV 1<\/div>,

DIV 2<\/div>,

DIV 3<\/div>]\n+console.log(divs);\n+```\n+\n+## React Scope Interface\n+\n+Scopes require a `ref` to access the internal interface of a particular scope.\n+The internal interface (`ReactScopeInterface`) exposes the following scope API:\n+\n+### getChildren: () => null | Array\n+\n+Returns an array of all child `ReactScopeInterface` nodes that are\n+of scopes of the same type. Returns `null` if there are no child scope nodes.\n+\n+### getChildrenFromRoot: () => null | Array\n+\n+Similar to `getChildren`, except this applies the same traversal from the root of the\n+React internal tree instead of from the scope node position.\n+\n+### getParent: () => null | ReactScopeInterface\n+\n+Returns the parent `ReactScopeInterface` of the scope node or `null` if none exists.\n+\n+### getProps: () => Object\n+\n+Returns the current `props` object of the scope node.\n+\n+### getScopedNodes: () => null | Array\n+\n+Returns an array of all child host nodes that successfully match when queried using the\n+query function passed to the scope. Returns `null` if there are no matching host nodes.\n\\ No newline at end of file\ndiff --git a\/packages\/react-interactions\/events\/README.md b\/packages\/react-interactions\/events\/README.md\nindex e40aca7cc1..a8e093e7cd 100644\n--- a\/packages\/react-interactions\/events\/README.md\n+++ b\/packages\/react-interactions\/events\/README.md\n@@ -1,4 +1,4 @@\n-# `react-ui\/events`\n+# `react-interactions\/events`\n \n *This package is experimental. It is intended for use with the experimental React\n events API that is not available in open source builds.*\n@@ -12,6 +12,8 @@ can be found [here](.\/docs).\n \n ## Event Responder Interface\n \n+Note: React Responders require the internal React flag `enableFlareAPI`.\n+\n An Event Responder Interface is defined using an object. Each responder can define DOM\n events to listen to, handle the synthetic responder events, dispatch custom\n events, and implement a state machine.\n","body":"","commit":{"authorEmail":"trueadm@users.noreply.github.com","subject":"[react-interactions] Add initial docs explaining React Scopes (#16892)","authorName":"Dominic Gannaway","authoredAt":"2019-09-25T14:57:47+02:00","shortRevision":"d0ebde77f6","revision":"d0ebde77f6d1232cefc0da184d731943d78e86f2"},"files":[{"status":"A","path":"packages\/react-interactions\/accessibility\/README.md"},{"status":"M","path":"packages\/react-interactions\/events\/README.md"}],"parents":["32e5c97d11e390e6a3d3ce6a2ab7443daed09747"]}

dillon1000/react

Files changed