Three D Cloud

Description

ThreeD Cloud is a React module using a 3D sphere to give a more interesting way to represent words, images or any other ReactNode element.

Requirements

• yarn : install dependencies using yarn
• yalc : package development and simulating the publishing and installation of packages.

Install

npm i @timsctt/threed-cloud
# or
yarn add @timsctt/threed-cloud

Usage

After installed the package add these lines :

import { CloudContainer } from '@timsctt/threed-cloud';

const MyComponent = () => {
  return (
    <>
      <CloudContainer radius={150} size={150} speed={1}>
        <p>Paragraph</p>
        <h4>Title</h4>
        <span>Basic element</span>
        <img src="my-source.png" />
        {/* [...] */}
      </CloudContainer>
    </>
  );
};

Building

Build package with tsup with production

yarn build

Developing

First install dependencies by running

yarn

To render in storybook run

yarn dev

Watch and rebuild code with tsup and runs Storybook to preview your UI during development.

yalc add three-d-cloud

Link your package to your development project by simulating package manage by using yalc

yalc add three-d-cloud
# or
npx yalc link three-d-cloud

Run tests with jest when changes are detected

yarn test:watch

API Reference

CloudContainer

Props

| Props | Type | Default | Description | | -------------- | ------ | ------- | ----------------------------------------------------------- | | radius | number | 200 | Determine cloud format. Used for depth calculation | | size | number | 150 | Size of the square container : size = width = height | | speed | number | 1 | Speed which cloud is animated | | randomPosition | bool | true | Choose randomly a position for elements each time rendering | | isPausable | bool | true | Allows you to pause the movement | | iconOnHover | bool | false | Display on hover play/pause icon | | mouseTracking | bool | true | Track mouse position and change cloud movements based on it | | className | string | - | Style classes spread by spaces |

Contributing

Contributions are always welcome! See CONTRIBUTING.md for ways to get started.

License

MIT

Credit

• This project is strongly inspired from TagCloud. You will retrieve the main logic in TagCloud project but its written in JavaScript.
• The structure and tools is inspired from tsup react package starter which is a boilerplate for create, build & publish React packages with TypeScript on public repository.