Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@astrojs/react
Advanced tools
@astrojs/react - npm Package Compare versions
Comparing version 3.0.8 to 3.0.9
| { | ||
| "name": "@astrojs/react", | ||
| "description": "Use React components within Astro", | ||
| "version": "3.0.8", | ||
| "version": "3.0.9", | ||
| "type": "module", | ||
@@ -55,3 +55,3 @@ "types": "./dist/index.d.ts", | ||
| "mocha": "^10.2.0", | ||
| "astro": "4.0.7", | ||
| "astro": "4.0.8", | ||
| "astro-scripts": "0.0.14" | ||
@@ -58,0 +58,0 @@ }, |
154
README.md
@@ -5,147 +5,35 @@ # @astrojs/react ⚛️ | ||
| ## Installation | ||
| ## Documentation | ||
| There are two ways to add integrations to your project. Let's try the most convenient option first! | ||
| Read the [`@astrojs/react` docs][docs] | ||
| ### `astro add` command | ||
| ## Support | ||
| Astro includes a CLI tool for adding first party integrations: `astro add`. This command will: | ||
| - Get help in the [Astro Discord][discord]. Post questions in our `#support` forum, or visit our dedicated `#dev` channel to discuss current development and more! | ||
| 1. (Optionally) Install all necessary dependencies and peer dependencies | ||
| 2. (Also optionally) Update your `astro.config.*` file to apply this integration | ||
| - Check our [Astro Integration Documentation][astro-integration] for more on integrations. | ||
| To install `@astrojs/react`, run the following from your project directory and follow the prompts: | ||
| - Submit bug reports and feature requests as [GitHub issues][issues]. | ||
| ```sh | ||
| # Using NPM | ||
| npx astro add react | ||
| # Using Yarn | ||
| yarn astro add react | ||
| # Using PNPM | ||
| pnpm astro add react | ||
| ``` | ||
| ## Contributing | ||
| If you run into any issues, [feel free to report them to us on GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below. | ||
| This package is maintained by Astro's Core team. You're welcome to submit an issue or PR! These links will help you get started: | ||
| ### Install dependencies manually | ||
| - [Contributor Manual][contributing] | ||
| - [Code of Conduct][coc] | ||
| - [Community Guide][community] | ||
| First, install the `@astrojs/react` integration like so: | ||
| ## License | ||
| ```sh | ||
| npm install @astrojs/react | ||
| ``` | ||
| MIT | ||
| Most package managers will install associated peer dependencies as well. Still, if you see a "Cannot find package 'react'" (or similar) warning when you start up Astro, you'll need to install `react` and `react-dom`: | ||
| Copyright (c) 2023–present [Astro][astro] | ||
| ```sh | ||
| npm install react react-dom | ||
| ``` | ||
| Now, apply this integration to your `astro.config.*` file using the `integrations` property: | ||
| ```diff lang="js" "react()" | ||
| // astro.config.mjs | ||
| import { defineConfig } from 'astro/config'; | ||
| + import react from '@astrojs/react'; | ||
| export default defineConfig({ | ||
| // ... | ||
| integrations: [react()], | ||
| // ^^^^^^^ | ||
| }); | ||
| ``` | ||
| ## Getting started | ||
| To use your first React component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore: | ||
| - 📦 how framework components are loaded, | ||
| - 💧 client-side hydration options, and | ||
| - 🤝 opportunities to mix and nest frameworks together | ||
| ## Options | ||
| ### Combining multiple JSX frameworks | ||
| When you are using multiple JSX frameworks (React, Preact, Solid) in the same project, Astro needs to determine which JSX framework-specific transformations should be used for each of your components. If you have only added one JSX framework integration to your project, no extra configuration is needed. | ||
| Use the `include` (required) and `exclude` (optional) configuration options to specify which files belong to which framework. Provide an array of files and/or folders to `include` for each framework you are using. Wildcards may be used to include multiple file paths. | ||
| We recommend placing common framework components in the same folder (e.g. `/components/react/` and `/components/solid/`) to make specifying your includes easier, but this is not required: | ||
| ```js | ||
| // astro.config.mjs | ||
| import { defineConfig } from 'astro/config'; | ||
| import preact from '@astrojs/preact'; | ||
| import react from '@astrojs/react'; | ||
| import svelte from '@astrojs/svelte'; | ||
| import vue from '@astrojs/vue'; | ||
| import solid from '@astrojs/solid-js'; | ||
| export default defineConfig({ | ||
| // Enable many frameworks to support all different kinds of components. | ||
| // No `include` is needed if you are only using a single JSX framework! | ||
| integrations: [ | ||
| preact({ | ||
| include: ['**/preact/*'], | ||
| }), | ||
| react({ | ||
| include: ['**/react/*'], | ||
| }), | ||
| solid({ | ||
| include: ['**/solid/*'], | ||
| }), | ||
| ], | ||
| }); | ||
| ``` | ||
| ### Children parsing | ||
| Children passed into a React component from an Astro component are parsed as plain strings, not React nodes. | ||
| For example, the `<ReactComponent />` below will only receive a single child element: | ||
| ```astro | ||
| --- | ||
| import ReactComponent from './ReactComponent'; | ||
| --- | ||
| <ReactComponent> | ||
| <div>one</div> | ||
| <div>two</div> | ||
| </ReactComponent> | ||
| ``` | ||
| If you are using a library that _expects_ more than one child element to be passed, for example so that it can slot certain elements in different places, you might find this to be a blocker. | ||
| You can set the experimental flag `experimentalReactChildren` to tell Astro to always pass children to React as React vnodes. There is some runtime cost to this, but it can help with compatibility. | ||
| You can enable this option in the configuration for the React integration: | ||
| ```js | ||
| // astro.config.mjs | ||
| import { defineConfig } from 'astro/config'; | ||
| import react from '@astrojs/react'; | ||
| export default defineConfig({ | ||
| // ... | ||
| integrations: [ | ||
| react({ | ||
| experimentalReactChildren: true, | ||
| }), | ||
| ], | ||
| }); | ||
| ``` | ||
| ## Troubleshooting | ||
| For help, check out the `#support` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help! | ||
| You can also check our [Astro Integration Documentation][astro-integration] for more on integrations. | ||
| ## Contributing | ||
| This package is maintained by Astro's Core team. You're welcome to submit an issue or PR! | ||
| [astro]: https://astro.build/ | ||
| [docs]: https://docs.astro.build/en/guides/integrations-guide/react/ | ||
| [contributing]: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md | ||
| [coc]: https://github.com/withastro/.github/blob/main/CODE_OF_CONDUCT.md | ||
| [community]: https://github.com/withastro/.github/blob/main/COMMUNITY_GUIDE.md | ||
| [discord]: https://astro.build/chat/ | ||
| [issues]: https://github.com/withastro/astro/issues | ||
| [astro-integration]: https://docs.astro.build/en/guides/integrations-guide/ | ||
| [astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components |
@@ -23,2 +23,3 @@ import React from 'react'; | ||
| if (typeof Component !== 'function') return false; | ||
| if (Component.name === 'QwikComponent') return false; | ||
@@ -25,0 +26,0 @@ if (Component.prototype != null && typeof Component.prototype.render === 'function') { |
@@ -25,2 +25,3 @@ import React from 'react'; | ||
| if (typeof Component !== 'function') return false; | ||
| if (Component.name === 'QwikComponent') return false; | ||
@@ -27,0 +28,0 @@ // Preact forwarded-ref components can be functions, which React does not support |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by0.37%
539
Worsened metrics
- Total package byte prevSize
- decreased by-12.83%
24017
- Number of lines in readme file
- decreased by-74.17%
39
No dependency changes