🌹 Sharyn

Sharyn is a collection of JavaScript / TypeScript packages that make your life easier and reduce your boilerplate code.

Note: I have ported the most useful of those packages over to my new repository V1V2.

💯 General

• @sharyn/util – Lodash-like utils:

  • between – Tests if a value is between two bounds
  • cycle – Cycles between multiple values
  • either – Tests equality with multiple values
  • exists – Returns true if not null or undefined
  • global – Functions to create and access global variables
  • ifs – An if, else if, else if... else util
  • inlineThrow – To throw in an expression
  • invoke – A self invoking function util
  • swit – An inline and less verbose switch
  • toggle – Toggles between two values
  • tryCatch – An inline try - catch - finally
  • wait – A Promise-based delay

• @sharyn/scripts – Helpers to write "NPM scripts" in a JavaScript file

• @sharyn/tags – No-op ES6 template string tags to enable syntax highlighting in editors:

  • css – For CSS
  • html – For HTML

• @sharyn/nanoid – A Nano ID default configuration

• @sharyn/actions – Flux Standard Actions creator functions

• @sharyn/chakra-next – Next Link applied to Chakra UI components

⚛️ React

• @sharyn/react-hooks – React Hooks:

  • useStateObject – A hook to manage a state that is an object

• @sharyn/react-router – Components for React Router:

  • PrivateRoute – A Route that redirects unauthenticated users
  • ServerOnlyRoute – A Route that refreshes the page on the client

🌐 Web

• @sharyn/browser – Helpers for code that runs in the browser:

  • clearCaches – Clears all the service worker caches
  • getFormData – Gives you the form data as a plain object

💻 Development

• @sharyn/prettier – A Prettier configuration
• @sharyn/tsconfig – TypeScript configurations
• babel-preset-sharyn – A Babel preset for React and Flow (not included in sharyn-dev)
• eslint-config-sharyn – An ESLint configuration for Babel, React and Flow (not included in sharyn-dev)

Getting Started

Depending on your needs, you can install individual modules, like @sharyn/util.swit, a group of modules, like @sharyn/util, or the whole library. If you want to install everything, run:

npm i sharyn && npm i --save-dev sharyn-dev
# or
yarn add sharyn && yarn add --dev sharyn-dev

This will install sharyn in your dependencies and sharyn-dev in your devDependencies.

If you use sharyn/react-hooks or sharyn/react-router which are included, you will need to install react and react-router too. They are not listed as peerDependencies to avoid noise in projects that want to use sharyn without React.

Imports

And depending on what packages you chose to install, you have different ways to import or require a module:

// If you installed an individual package (all lowercase)
import swit from '@sharyn/util.swit'

// If you installed a group of modules like '@sharyn/util'
import swit from '@sharyn/util/swit'
import { swit } from '@sharyn/util'

// If you installed the whole 'sharyn' library
import swit from 'sharyn/util/swit'
import { swit } from 'sharyn/util'

Note: TypeScript users, you need your esModuleInterop set to true if you want to import the default exports without having to use the * syntax.

Credits

By Jonathan Verrecchia (verekia) Github • Twitter • Website – MIT License

Sharyn is a reference to one of my favorite metalcore songs, Rose of Sharyn by Killswitch Engage.

Rose illustration by tiaesther_4360