Taslonic for React

Installation

Via NPM:

npm install --save @glorious/taslonic-react

Via Yarn:

yarn add @glorious/taslonic-react

Usage

You can easily plug Taslonic into your React project. Taslonic integrates smoothly with projects manually configured or generated with Create React App.

Using CSS apart from JavaScript

In times where styled-components are a thing, importing CSS files can sound unusual. But, if you prefer to keep styles apart from your JavaScript, you can do it smoothly using Taslonic.

Import the CSS in the file where you mount your application.

import '@glorious/taslonic-react/dist/taslonic.css';
// All the other things your app needs

ReactDOM.render( ... );

Then, import Taslonic components wherever you need them.

import React from 'react';
import { Button, alert } from '@glorious/taslonic-react';

export const MyComponent = () => {
  const handleClick = () => {
    alert.open({
      content: <p>I am an <strong>alert</strong>.</p>
    });
  };

  return (
    <Button onClick={handleClick}>
      Click Here
    <Button>
  );
};

Using JavaScript and CSS together

If you prefer to get rid of the CSS import declaration, Taslonic also contains a bundle with all styles included.

import React from 'react';
import { Button, alert } from '@glorious/taslonic-react/dist/styled';

export const MyComponent = () => {
  const handleClick = () => {
    alert.open({
      content: <p>I am an <strong>alert</strong>.</p>
    });
  };

  return (
    <Button onClick={handleClick}>
      Click Here
    <Button>
  );
};

Using Taslonic globally

If your project is not using ES6 modules or you want to give Taslonic a quick try, here is how you can use Taslonic globally.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Taslonic: Standalone React</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glorious/taslonic-react/dist/taslonic.css">
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.13.8/babel.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@glorious/taslonic-react/dist/index.js"></script>
    <style media="screen">
      html, body {
        font-family: Arial, sans-serif;
      }
    </style>
  </head>
  <body>
    <div data-root></div>
    <script type="text/babel">
      (function(){
        const { Button, alert } = taslonicReact;

        const Example = () => {
          const openAlert = () => {
            alert.open({ content: <p>Great, it works!</p> })
          }

          return (
            <Button onClick={openAlert}>Click Here</Button>
          );
        };

        ReactDOM.render(<Example />, document.querySelector('[data-root]'));
      }());
    </script>
  </body>
</html>

Time to build something!

Now that you have plugged Taslonic in your project, you can inspect every component in detail by visiting the live documentation or dig a little deeper about Taslonic UI fundamentals.

Live Documentation

Fundamentals