Ryan Components

This is a package that contains many common styles and components for sites and apps with Ryan Rampersad branding.

This package is primarily developed with Gatsby consumers in mind. Any environment suitable to host react components and styled components should also work.

Tech

• typescript
• react
• styled-components
• rollup
• babel
• nodemon
• yalc

Installation

To use this package as a consumer:

yarn add @ryanrampersad/ryan-components

via npm

Example

To use this package as a consumer after installation, import components that you need:

import { FullHero, HeroBody, BrandTitle } from "@ryanrampersad/ryan-components";

export function Screen() {
  return <div>
    <FullHero>
      <HeroBody>
        <BrandTitle>Ryan</BrandTitle>
      </HeroBody>
    </FullHero>
  </div>
}

Development

For development purposes, this package uses yalc to mitigate issues with yarn link adding erroneous duplicated dependencies. For more information about this issue, refer to the styled components documentation about bundling and related topics, and consult this issue.

Please install yalc to contribute to this package.

To build this package:

yarn build

To watch for changes and automatically rebuild:

yarn watch

To watch for changes, automatically rebuild and automatically yalc push (update local consumers copy of the package):

yarn dev

This command can be used in conjunction, for example, with gatsby start to automatically rebuild the consumer when this package's changes are pushed.

Note: if yarn dev does not work initially, try yalc publish to add this package to the yalc store.

Font

This package may assume some specific fonts are available. These fonts must be provided by the consumers of this package.

See the fonts documentation for details.

Gatsby html.js

Please review how you might customize your html.js file when using this package.

See the Gatsby html.js documentation.