---
title: "Using React library on Drupal: There's more.... · Appnovation"
url: "https://www.appnovation.com/insights/using-react-library-drupal-theres-more"
description: "Follow-up: extend React components into Drupal regions, with a React image gallery example and extra tips for React on Drupal."
---

Article

# Using React library on Drupal: There's more....

[![](https://cdn.sanity.io/images/ey850001/production/e5edf6097ecdfad95ab6497294f058113584fc7a-68x68.jpg?w=68&auto=format) paulo paulo Development Lead](/people/paulo-paulo.md) May 08, 2018  
 2 min read 

![Using React library on Drupal: There's more....](https://cdn.sanity.io/images/ey850001/production/f77a952e0c42d76a66c4d6e970a0a8985a8270d1-1440x600.png?w=1400&auto=format) 

Following up from my post last week, I wanted to add some additional material regarding [React on Drupal](/insights/using-react-library-drupal.md)...I hope you'll find it useful...

**Bonus - Extend the components to Drupal regions**

The react image gallery module provides a very easy way to display an image gallery on any piece of content, however what happen if we want to include it outside of the contents (e.g. Block regions), or in a Modal?

That can be easily handled using a custom block type (remember that blocks now are entities, so we can do exactly what we do with content types). We only need to create a block with an entity reference field (paragraphs) and insert a new instance in the block region we want and it will work automatically.

If we want to load the block in a modal, we can make use of Block Styles module ([https://www.drupal.org/project/block\_styles) (opens in new window)](https://www.drupal.org/project/block_styles)in combination with the bootstrap module, as they permit to define actions (collapse, modal, etc..) on the block, for a modal we just need to configure the proper style in the block configuration:

and when it is rendered on the page we have:

So I'm making use of [Drupal](/services/drupal-development.md) features without depending on extra code and still being able to produce something useful.

[![](https://cdn.sanity.io/images/ey850001/production/e5edf6097ecdfad95ab6497294f058113584fc7a-68x68.jpg?w=68&auto=format) paulo paulo Development Lead · Appnovation](/people/paulo-paulo.md) 

## Keep reading

[![Co-op students from marketing and GTM](https://cdn.sanity.io/images/ey850001/production/8a7b8228a29cc549ea864c40f56f7deb63639833-1200x644.png?w=640&auto=format)](/insights/meet-our-co-op-students.md)

 Article · 6 min Jun 06, 2023 

### [Meet our Co-Op Students](/insights/meet-our-co-op-students.md)

[Appnovation](/people/appnovation.md) Article 

## Get the thinking,  
*before everyone else.*

One considered email a month. New essays, field notes from live engagements, and the occasional strong opinion. No noise.