JupiterUI Source implemented in React. Forked from JupiterUI/JupiterUI-Components
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
Tristan B. a75a6d20f8 Merge branch 'main' into main 6 months ago
dist Patched imageInnerClass bug; Version 1.3.2 6 months ago
example Version 1.3.1 6 months ago
src Patched imageInnerClass bug; Version 1.3.2 6 months ago
.editorconfig Version 1.0.0 7 months ago
.gitignore Basic setup 7 months ago
Changelog.md Patched imageInnerClass bug; Version 1.3.2 6 months ago
LICENSE Version 1.0.0 7 months ago
README.md Version 1.3.1 6 months ago
package.json Patched imageInnerClass bug; Version 1.3.2 6 months ago

README.md

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

  1. In the root directory, run cd example
  2. Run yarn install
  3. 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

or

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:

  • themes: bool
    • If true, themes will be activated
  • accents: bool
    • If true, accents will be activated

Contributing

Send a PR!

FAQ

Q: Where are notifications?

A: They are coming! Stay tuned for version 1.1!


License

MIT © Athena