django-react-templatetags

Easy react components within your django templates

These details have not been verified by PyPI

Project links

Homepage

GitHub Statistics

View statistics for this project via Libraries.io, or by using our public dataset on Google BigQuery

Development Status
- 4 - Beta
Environment
- Web Environment
Framework
- Django
Intended Audience
- Developers
License
- OSI Approved :: MIT License
Natural Language
- English
Programming Language
Topic
- Utilities

Project description

Django-React-Templatetags

This extension allows you to add React components into your django templates.

Requirements

Python 2.7 / Python 3.4 / PyPy
Django 1.8+

Installation

Install the library with pip:

$ pip install django_react_templatetags

Quick Setup

Make sure django_react_templatetags is added to your INSTALLED_APPS.

INSTALLED_APPS = (
    # ...
    'django_react_templatetags',
)

You also need to add the react_context_processor into the context_middleware:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            'templates...',
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'debug': True,
            'context_processors': [
                ...
                'django_react_templatetags.context_processors.react_context_processor',
            ],
        },
    },
]

This should be enough to get started.

Usage

Load the {% load react %}
Insert component anywhere in your template: {% react_render component="Component" data=my_data %}. This will create a placeholder.
Put {% react_print %} in the end of your template. (This will output the ReactDom.render javascript).

Full example

This template:

{% load react %}
<html>
    <head>...</head>

    <body>
        <nav>
            {% react_render component="Menu" data=menu_data %}
        </nav>
    </body>

    {% react_print %}
</html>

Will transform into this:

{% load react %}
<html>
    <head>...</head>

    <body>
        <nav>
            <div id="Menu_1"></div>
        </nav>
    </body>

    <script>
        ReactDOM.render(
            React.createElement(Menu, {'example', 1}),
            document.getElementById('Menu_1')
        );
    </script>
</html>

Settings

REACT_COMPONENT_PREFIX: Adds a prefix to your React.createElement include.
- Example using (REACT_COMPONENT_PREFIX="Cookie.")
- …Becomes: React.createElement(Cookie.MenuComponent, {})

Q&A

How do I override the markup generated by react_print?
- Simple! Just override the template react_print.html
This library only contains templatetags, where is the react js library?
- This library only covers the template parts (that is: placeholder and js render).
I dont like the autogenerated element id, can I supply my own element?
- Sure! Just add the param identifier="yourid" in react_render
How do I apply my own css class to the autogenerated element?
- Add class="yourclassname" to your react_render

Tests

This library include tests, just run python runtests.py.

You can also run separate test cases: runtests.py tests.ReactIncludeComponentTest

Contributing

Want to contribute? Awesome. Just send a pull request.

License

Django-React-Templatetags is released under the MIT License.

Project details

These details have not been verified by PyPI

Project links

Homepage

GitHub Statistics

View statistics for this project via Libraries.io, or by using our public dataset on Google BigQuery

Development Status
- 4 - Beta
Environment
- Web Environment
Framework
- Django
Intended Audience
- Developers
License
- OSI Approved :: MIT License
Natural Language
- English
Programming Language
Topic
- Utilities

Release history Release notifications | RSS feed

8.0.0

Dec 30, 2023

7.0.1

Jan 7, 2023

7.0.0

Jan 4, 2022

6.0.2

Sep 5, 2020

6.0.1

Aug 30, 2020

6.0.0

Apr 28, 2020

5.4.0

Apr 28, 2019

5.3.0

Apr 24, 2019

5.2.1

Aug 10, 2018

5.2.0

Aug 9, 2018

5.0.1

May 22, 2018

5.0.0

Apr 5, 2018

4.0.0

Dec 6, 2017

3.0.2

Nov 22, 2017

3.0.1

Nov 13, 2017

2.6.2

Apr 25, 2018

2.6.1

Aug 25, 2017

2.6.0

Apr 1, 2017

2.5.0

Mar 31, 2017

This version

2.4.0

Nov 17, 2016

2.3.0

Nov 7, 2016

2.2.0

Oct 31, 2016

2.1.1

Jul 7, 2016

2.1.0

Apr 13, 2016

2.0.1

Dec 16, 2015

2.0.0

Dec 16, 2015

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django_react_templatetags-2.4.0.tar.gz (7.2 kB view hashes)

Uploaded Nov 17, 2016 Source

Hashes for django_react_templatetags-2.4.0.tar.gz

Hashes for django_react_templatetags-2.4.0.tar.gz
Algorithm	Hash digest
SHA256	`f6ed9f8ca983868fc452c65e35991e810f55ebd9b936f57df85a5a84166bf632`
MD5	`cd397ee4fabe01a6498760e2aef13050`
BLAKE2b-256	`9dd5347b36d2e992cb09d898cb042a41c5e6e0612c342144895b3138867bc3af`