https://github.com/cawfree/react-native-blobular

The Man in Blue's awesome Blobular, ported to React Native.
https://github.com/cawfree/react-native-blobular

blob blobular fluid goo react react-native

Last synced: 10 days ago
JSON representation

The Man in Blue's awesome Blobular, ported to React Native.

• Host: GitHub
• URL: https://github.com/cawfree/react-native-blobular
• Owner: cawfree
• License: mit
• Created: 2019-08-24T09:24:26.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T09:05:22.000Z (almost 2 years ago)
• Last Synced: 2024-09-14T11:39:56.659Z (2 months ago)
• Topics: blob, blobular, fluid, goo, react, react-native
• Language: JavaScript
• Homepage:
• Size: 14.8 MB
• Stars: 52
• Watchers: 3
• Forks: 8
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-blobular

The [Man in Blue](https://www.themaninblue.com)'s awesome Blobular, ported to React Native. Find the original experiment [here](https://themaninblue.com/experiment/Blobular/)!



  



## 🚀 Getting Started

Using [`npm`]():

```sh

npm install --save react-native-blobular

```

Using [`yarn`]():

```sh

yarn add react-native-blobular

```

This project depends on [react-native-svg](https://github.com/react-native-community/react-native-svg), so be sure that the library has been [linked](https://github.com/react-native-community/react-native-svg#installation) if you're running anything less than [[email protected]](https://facebook.github.io/react-native/blog/2019/07/03/version-60).

## ✍️ Example

It's pretty simple, just embed a `` inside your `render` method, then listen for the `onBlobular` callback, where you can allocate a number of `Blob`s for your user to play around with.

```javascript

import React from 'react';

import { Dimensions } from 'react-native';

import uuidv4 from 'uuid/v4';

import Blobular, { Blob } from 'react-native-blobular';

const { width, height } = Dimensions

  .get('window');

export default () => (

   putBlob(

      new Blob(

        uuidv4(), // unique id

        100, // radius

        75, // viscosity

        50, // min radius

      ),

      width * 0.5,

      height * 0.5,

    )}

  />

);

```

You can also suppress user interaction by supplying `pointerEvents="none"` to your `` component, and instead use the `blobular` instance returned in the callback to programmatically manipulate what's on screen.

## 📌 Props

Property | Type | Required | Description

:--- | :--- | :--- | :--- 

width|number|no|Width of the view.

height|number|no|Height of the view.

renderBlob|func|no|A function you can pass to define the SVG path.

pointerEvents|string|no|Allow the user to interact, or manipulate programmatically.

onBlobular|func|no|A callback returning you with a `blobular` instance.

onBlobCreated|func|no|A callback for when a new blob has been generated.

onBlobDeleted|func|no|A callback for when an existing blob has been removed.

-----

## ✌️ License

[MIT](https://opensource.org/licenses/MIT)