Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/inplayer-org/inplayer-ui
InPlayer React UI Components
https://github.com/inplayer-org/inplayer-ui
design react styled-components ui ui-components
Last synced: about 2 months ago
JSON representation
InPlayer React UI Components
- Host: GitHub
- URL: https://github.com/inplayer-org/inplayer-ui
- Owner: inplayer-org
- License: mit
- Created: 2018-10-05T10:50:37.000Z (over 6 years ago)
- Default Branch: dev
- Last Pushed: 2022-09-30T08:19:39.000Z (over 2 years ago)
- Last Synced: 2024-10-28T14:44:35.228Z (2 months ago)
- Topics: design, react, styled-components, ui, ui-components
- Language: TypeScript
- Homepage: https://inplayer-ui.netlify.app/
- Size: 15.7 MB
- Stars: 13
- Watchers: 21
- Forks: 3
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
InPlayer React UI Components
Modern React UI library. Code less, do more.
[![CI]][ci]
[![Version][version-badge]][package]
[![MIT License][license-badge]][license]
```sh
yarn add @inplayer-org/inplayer-ui styled-components
```
InPlayer UI is a style system / UI library for [React](https://reactjs.org/). It works with [Styled Components 💅](https://www.styled-components.com).
## Up & Running
To install dependencies with Yarn, run:
```sh
$ yarn install
```
or to install with npm, run:
```sh
$ npm install
```
## Usage
Here is a quick example to get you started, **it's all you need**:
```jsx
import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import { ThemeProvider } from "styled-components";
import { ThemeWrapper, Button } from "@inplayer-org/inplayer-ui";
function App() {
return (
Hello World
);
}
ReactDOM.render(, document.querySelector('#app'));
```
Yes, it's really all you need to get started as you can see in this live and interactive demo:
[](https://codesandbox.io/s/k5qqq2797)
### Modifiers
This library utilizes
[`styled-components-modifiers`](https://github.com/Decisiv/styled-components-modifiers) to build
modifiers. Modifiers are small functions that allow us to alter the properties of an Element.
They primarily live in the Element's file and are solely responsible for modifying styles.
Some modifiers are common to multiple Elements. An example would be `fontWeights`.
These common modifiers live in `src/modifiers`
## Local Development
### Module Development Workflow
Helpful information on development workflow in this library lives
[here](https://gist.github.com/srdjanRakic/139502483b17c3d2d7675d5592ff8d48).
### Linting
\_**NOTE:** The linter will run against everything in the `src` directory.
### JavaScript Linting
To run the linter once:
```
$ yarn lint:js
```
To run the watch task:
```
$ yarn lint:js:watch
```
#### Style Linting
To run the style linter:
```
$ yarn lint:style
```
#### Linting JavaScript & Styles
To run both linters:
```
$ yarn lint
```
### Review
If you'd like to run the linters and tests at once (this is a nice check before pushing to
Github or deploys), you can run:
```
$ yarn review
```
### Build
\_**NOTE:** When you run `build`, Babel will create a `build` directory.
Run once:
```
$ npm/yarn run build
```
Run the watch script:
```
$ npm/yarn run build:watch
```
_**NOTE:** the build script runs in the `prepublishOnly` script just before you publish to npm._
## Contributing
We are thankful for any contributions made by the community. By contributing you agree to abide by
the Code of Conduct in the [Contributing Guidelines](https://github.com/inplayer-org/inplayer-ui/blob/master/.github/CONTRIBUTING.md).
## License
Licensed under the MIT License, Copyright © 2018-present InPlayer.
See [LICENSE](https://github.com/inplayer-org/inplayer-ui/blob/master/LICENSE) for more information.
[ci]: https://github.com/inplayer-org/inplayer-ui/workflows/CI/badge.svg
[version-badge]: https://img.shields.io/npm/v/@inplayer-org/inplayer-ui.svg?colorB=blue
[package]: https://www.npmjs.com/package/@inplayer-org/inplayer-ui
[license-badge]: https://img.shields.io/npm/l/@inplayer-org/inplayer-ui.svg?style=flat-square
[license]: https://github.com/inplayer-org/inplayer-ui/blob/master/LICENSE