@timsctt/threed-cloud

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.