Download the PHP package lemmon/twig-jsx without Composer
On this page you can find all versions of the php package lemmon/twig-jsx. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download lemmon/twig-jsx
More information about lemmon/twig-jsx
Files in lemmon/twig-jsx
Package twig-jsx
Short Description JSX-like component syntax for Twig
License MIT
Homepage https://github.com/lemmon/twig-jsx
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package twig-jsx
Twig JSX
JSX-like component syntax for Twig.
Write <Alert {type} important /> instead of a verbose {% include %} call. Twig JSX transforms JSX-like component tags into native Twig {% include %} and {% embed %} calls at the lexer level — no runtime overhead, no Symfony dependency.
Requirements
- PHP
^8.1 - Twig
^3.0
Installation
Quick Start
1. Register the Extension and Lexer
2. Create a Component
Save your component in templates/components/Alert.twig:
3. Use It in a Template
Prop Syntax
| Syntax | Example | Compiles to (inside props bag) |
|---|---|---|
| Static | type="info" |
'type': 'info' |
| Expression | type={userType} |
'type': userType |
| Expression | count={items\|length} |
'count': items\|length |
| Expression | theme={dark ? 'd' : 'l'} |
'theme': dark ? 'd' : 'l' |
| Shorthand | {type} |
'type': type |
| Boolean | important |
'important': true |
A quoted value is a static string — it is not interpolated. For a dynamic
value, use the expression form: class={'alert-' ~ type} rather than
class="alert-{{ type }}". A quoted value containing a {{ … }} output tag is
rejected with a SyntaxError that points at the expression form, instead of
silently passing the literal text. (To pass a literal {{ … }} through, wrap it
in a quoted expression: tpl={'{{ name }}'}.) See
docs/decisions/0001-no-interpolation-in-quoted-props.md
for the reasoning.
How a Component Reads Its Inputs
Every prop the caller passes — semantic inputs and HTML attributes alike — arrives in a single
props bag of type ComponentAttributes. The component template decides what to extract:
props.key— read any valueprops.except('a', 'b', ...)— returns a new bag without the listed keys; useful for spreading HTML fallthrough attributes onto the root element{{ props|spread }}— renders all entries as HTML attribute pairs
Configuration
| Option | Default | Description |
|---|---|---|
directory |
components |
Subdirectory inside templates/ where component files are looked up. |
extension |
.twig |
File extension for component templates. |
prefix |
"" |
Tag prefix. When empty, any Capitalized tag is treated as a component (JSX-style). |
props_variable |
props |
Name of the variable that holds all props in the component template. |
content_block |
content |
Twig block name where a bodied tag's children are rendered. |
Alternatives
- Symfony UX Twig Component — PHP class-backed components; requires the Symfony UX bundle.
- TwigX — similar
<Component />syntax as a Symfony bundle; requires Symfony Config and DI.
Contributing
Bug reports and pull requests are welcome on GitHub.
License
MIT. See LICENSE.
