https://github.com/flekschas/piling.js-react

Template for using piling.js in a React app
https://github.com/flekschas/piling.js-react

pilingjs reactjs

Last synced: 3 months ago
JSON representation

Template for using piling.js in a React app

• Host: GitHub
• URL: https://github.com/flekschas/piling.js-react
• Owner: flekschas
• License: apache-2.0
• Created: 2020-09-18T22:35:22.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-02-12T19:35:04.000Z (almost 3 years ago)
• Last Synced: 2024-03-19T00:44:38.370Z (11 months ago)
• Topics: pilingjs, reactjs
• Language: JavaScript
• Homepage: https://flekschas.github.io/piling.js-react/
• Size: 1.49 MB
• Stars: 4
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Piling.js React Template

This template demonstrates how [piling.js](https://github.com/flekschas/piling.js) can be used within a [React](https://reactjs.org/) app.

To keep things simple, the React app was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

**Live Demo:** https://flekschas.github.io/piling.js-react/

## How To

It's very simple to use Piling.js within a React App. In your React component that should host Piling.js, create a DOM element and subscribe to its reference as follows:

```JSX

import createPilingInterface from './piling-interface.js';

import './piling-wrapper.css';

export default function Component() {

  const pilingInitHandler = useCallback(async (element) => {

    if (!element) return;

    const piling = await createPilingInterface(element);

    return () => piling.destroy(); // Free resources

  }, []);

  return 
;

}

```


In `piling-wrapper.css` you specify the style of the piling-wrapper component

```css

.piling-wrapper {

  position: relative;

  width: 100%;

  height: 100%;

}

```

In `piling-interface.js` you would then implement your piling interface and export a function that initializes the interface using the reference to the dom element.

```javascript

import createPilingJs, { createLibraryAsync, createImageRenderer } from 'piling.js';

export default async function create(element) {

  return createLibraryAsync(element, {

    renderer: createImageRenderer(),

    items: [

      { src: 'https://storage.googleapis.com/pilingjs/coco-cars/000000253413.jpg' },

      { src: 'https://storage.googleapis.com/pilingjs/coco-cars/000000533739.jpg' },

      { src: 'https://storage.googleapis.com/pilingjs/coco-cars/000000314530.jpg' }

    ]

  });

}

```

Details on how to configure the piling interface you can find at https://piling.js.org/docs