@soundise/react-components NPM

About

react-components is a library of responsive React UI components that look incredible on any device. It includes buttons, inputs, icons, and more - everything we need at Soundise to create beautiful web interfaces without repeating ourselves. This package helps us build all of our projects faster and more reliably with higher-quality code.

Components

Visit storybook.soundise.com to check out available components.

Installation

yarn add styled-components@beta

yarn add @soundise/react-components

Setup

For react-components to work correctly, you need to set up the ThemeProvider at the root of your application. You can choose a light theme, a dark theme, or just implement a theme based on the prefers-color-scheme media query. Go to the root of your application and do this:

import { ThemeProvider } from 'styled-components';
import { darkTheme } from '@soundise/react-components';

const Application = () => (
  <ThemeProvider theme={darkTheme}>
    <AppComponent /> // ---> Your App Component
  </ThemeProvider>
);

If you want to use our global style with reset CSS, and custom selection, do this:

import { ThemeProvider } from 'styled-components';
import { darkTheme, GlobalStyle } from '@soundise/react-components';

const Application = () => (
  <ThemeProvider theme={darkTheme}>
    <GlobalStyle />
    <AppComponent /> // ---> Your App Component
  </ThemeProvider>
);

If you use TypeScript, you can create a styled.d.ts file in the src/ folder to get definitions for styled-components:

import 'styled-components';
import type { ITheme } from '@soundise/react-components';

declare module 'styled-components' {
  export interface DefaultTheme extends ITheme {}
}

Usage

Once the react-components library is installed and configured, you can use any of the components as follows:

import { SoundiseIcon } from '@soundise/react-components';

const Component = () => <SoundiseIcon />;

Every single component has its own exported interface that can be used in your app:

import React from 'react';
import { SoundiseIcon } from '@soundise/react-components';
import type { ISoundiseIconProps } from '@soundise/react-components';

interface IWrapperProps extends ISoundiseIconProps {
  name: string;
}

const Wrapper = ({ name, ...props }: IWrapperProps) => (
  <div id={name}>
    <p>Wrapper</p>
    <SoundiseIcon {...props} />
  </div>
);

Community

We are excited to see the community adopt Soundise, raise issues, and provide feedback. Whether it's a feature request, a bug report, or a project to showcase, please get involved!