Input Logic Elements
Component
Description
Avatar
Display avatar image. Falls back to initial.
Carousel
Simple carousel with arrows and dot indicators.
DatePicker
Simple calendar-style date-picker.
Dropdown
Simple dropdown menus.
Helmet
Basic Component to set title and meta tags in your HTML.
Image
Renders an image from an array of src's, assuming the first is low resolution, and the last is high resolution.
Interval
Call some function on an interval during the lifecycle of a component
LazyLoad
Won't render children until it's in viewport.
Level
Position all children on a level row.
LoadingIndicator
Show a three dots loading indicator.
Modal
Display modals from anywhere in your component tree.
Notification
Displays a notification message.
Pagination
Display pagination links for a url that follows DRF format.
Router
The best router. 😅
Tooltip
Simple tooltips.
Hook
Description
useActions
Define actions and add their reducer to your global store from a Component.
useDocumentClick
Handle clicks/taps outside of a given component ref.
useMappedState
Map part of global state to a Component and keep it in sync.
useMount
Invoke function when component is mounted or unmounted.
useRequest
Connect a Component to the result of an API request.
useForm
Take the pain out of forms!
useStorePath
Syncs the value of the given path, and exposes a convenient setter.
useSuccessiveTaps
A hook that fires a callback only after n
taps or clicks.
useVariantState
A hook for defining strict state descriptors and transitions.
Making Changes
Clone the repo
npm install
npm run bootstrap
Adding a New Package
Copy the _package-template
folder
Rename it, like MyComponent
, and move into /components
folder
Update the name
field to match: "@app-elements/<my-component>"
Add your code to the index.js
file and add any other files you need
From the root of the project run: npm run bootstrap
Publishing Changes
Sign up for an NPM account
Login via your terminal npm login
Get invited to app-elements
on NPM; Cory, Mulder, and Kyle are all admins at the time of writing
npm run changed
to see what would be published
npm run publish
Follow the terminal output and you should be good to go!