Jupiterui-components NPM

JupiterUI Components

Jupiter components implemented in React.

Project	Repository	Demo	Playground
JupiterUI Source	JupiterUI	Source demo	Source playground
JupiterUI React	JupiterUI-Components (you're here)	React demo	React playground
JupiterUI Docs	JupiterUI-Docs	`null`	`null`

Developing

Running the example

In the root directory, run cd example
Run yarn install
Then run yarn s (or yarn start)

That should open the live React version in a browser.

Compiling source

In the root directory, run yarn w (or yarn start)

Documentation

See near the end of this file for Contributing information.

Installing

Step one

npm install --save jupiterui-components

yarn add jupiterui-components

Step two

You need to add jupiterui.css to your project. Version 1.2.0 now exports the CSS file.

You can either import it into your project with:

import 'jupiterui-components/dist/jupiterui.css';

Or you can manually download and add it from here.

Either option uses the latest version of Jupiter.

Usage

import React from "react";
import { Button } from "jupiterui-components";

const Home = () => (
	<Button>I'm a button!</Button>
);

export default Home;

Components

Accordion

Properties:

props.className
props.triggerClass
props.title
props.content

Example:

<Accordion
	className="mt-5r"
	title={'Accordion'}
	content={<p className="mb-0">This is some text inside an accordion.</p>}
/>

Button

Properties:

props.className
props.icon
props.isLoading
props.isLoadingText

Example:

<Button className="bg-cyan-40 radius-90">I'm a button!</Button>

Card

Properties:

props.className
props.imageClass
props.imageInnerClass
props.img (url)
props.contentClass
props.content
props.titleClass
props.title
props.onClick

Example:

<Card
	title="Card"
	content={<p>This is a cool card!</p>}
/>

Dropdown

Properties:

props.className
props.triggerClass
props.triggerInner
props.menuClass
props.itemClass
props.linkClass
props.items
- label
- callback (func)

Example:

<Dropdown
	items={[
		{
			label: "Link 1",
			callback: () => alert("Clicked");
		}
	]}
/>

Icon

Properties:

props.className
props.icon

Example:

<Icon icon="search" />

Image

Properties:

props.type; "bg" or "img" or null
props.className
props.alt
props.src

Example:

<Image
	type="img"
	src="image.jpeg"
/>

Modal

Note: Since the modal element in-and-of itself is not "contained," you must manage the state.

Properties:

props.state
props.setState
props.clickToClose
props.subtitle
props.title
props.text
props.innerContent
props.cancelText
props.buttonText
props.icon
props.callback
props.buttonCloseModal

Example:

<Modal
	state={modalState}
	setState={setModalState}
	title={"Get started"}
	innerContent={
		<p>Make sure you have <code>jupiterui.css</code> imported in your project. Now, run <code>yarn add jupiterui-components</code> and then import the components as you need them in your project.</p>
	}
	callback={() => setModalState(false)}
	showCloseButton={true}
/>

Tabs

Properties:

props.tabs (object)
- id (Must be unique!)
- element (JSX element)
- title (Trigger title)
- icon (Name of icon)
props.triggerClass
props.tabContainerClass
props.tabLinksClass
props.tabsClass
props.tabClass

Example:

<Tabs
	tabs={[
		{
			id: "1",
			element: <div><p>Tab 1</p></div>,
			title: "Tab 1"
		},
		{
			id: "2",
			element: <div><p>Tab 2</p></div>,
			title: "Tab 2"
		},
		{
			id: "3",
			element: <div><p>Tab 3</p></div>,
			title: "Tab 3"
		}
	]}
/>

Dynamics

Animate

When you use the <Animate> element, it wraps a <div> around the children to perform the animation using the Intersection Observer API via the react-intersection-observer library.

Note: There is an occasional issue where animations on smaller devices don't animate right away—you have to scroll down a bit to initiate the animation. This is only an issue on top-level animations. That is, animations above-the-fold. To avoid this issue, simply add the animation class to the Animate element. This means the animation will start right away, regardless of if the react-intersection-obeserver library thinks it is in view.

For example:

<Animate className='fade-in-up' animate="fade-in-up"></Animate>

Alternatively, you can omit the <Animate> element entirely and only add the necessary animation class manually.

Properties:

animation options: - props.root - props.rootMargin - props.threshold - props.triggerOnce
props.animate
props.className

Themes

Jupiter denotes the current theme by adding either .dark or .light to the body element. If you want the theme logic to be handled by default, you can use the ThemeProvider exported by Jupiter.

Make sure your app is wrapped in the <ThemeProvider> element.
Use the useTheme hook from Jupiter to access the theme and be given a callback to change it.
- Example:
  - const { themes: { theme, setTheme }, accents: { accent, setAccent } } = useTheme();

You can see an example of the <ThemeProvider> in the example/src/App.js file. Likewise, an example of setting themes is in the example/src/routes/Home.js.

The <ThemeProvider> accepts the following props: